$("#tutorial").on("click", function () {
  $(document).ready(async function () {
    const driver = new Driver({
      doneBtnText: "Sair",
      closeBtnText: "Fechar",
      nextBtnText: "Próximo",
      prevBtnText: "Anterior",
      allowClose: false,
    });
    driver.defineSteps([
      {
        element: "#btnFiltros",
        popover: {
          title: "Botão Filtros",
          description: "Clique aqui para filtrar consulta.",
          position: "right",
        },
      },
      {
        element: "#btnIncluir",
        popover: {
          title: "Botão Incluir",
          description:
            "Clique aqui para iniciar o cadastro de uma faixa.",
          position: "right",
        },
      },
      {
        element: "#tabelaItens",
        popover: {
          title: "Tabela de Faixas",
          description: "Aqui estão os dados das faixas cadastradas.",
          position: "top",
        },
      },
    ]);
    driver.start();
  });
});
$(document).ready(async function () {
  componenteFiltro('faixaMaterial', false, false, 'Faixa')

  const permissaoUsuarioLogado = await permissaoAcessos('PCPFAIXA');

  $('#btnFiltros').on('click', function () {
    $('#modal-filtros').modal('show')
  })

  $('#btnIncluir').on('click', function () {
    if (permissaoUsuarioLogado.INCLUI === 'S') {
      window.location.href = 'pcpfaixa/create'
    } else {
      msgAlertaSemConfirmacao("Sem permissão para incluir!");
    }
  })

  $('#btnConsultar').on('click', function () {
    consultar()
  })

  async function consultar() {
    try {
      $.LoadingOverlay('show')
      const filtros = retornarFiltros()
      const response = await requisicao('GET', `/sisplan/pcpfaixa/v1/faixas?`, `FAIXA=${filtros.faixa}&TIPO=${filtros.tipo}`, '', 3600000)
      const json = await response.json()

      if (!json) {
        return
      }

      const { resultado, mensagem } = json
      if (mensagem?.codigo !== 200) {
        throw mensagem?.mensagem
      }

      criarTabelaItens(resultado)
      $('#modal-filtros').modal('hide')
    } catch (error) {
      console.error(error)
      msgErro(error || 'Não foi possível buscar os dados.')
    } finally {
      $.LoadingOverlay('hide')
    }
  }

  function retornarFiltros() {
    const faixa = pegaChave('#txtFaixa')
    const tipo = $('#selectTipo').val()

    return {
      faixa,
      tipo,
    }
  }

  function retornarBotaoOpcoes(data) {
    const retorno = '<div style="text-align:start;"> ' +
      '    <button class="btn btn-info btn-sm dropdown-toggle btnVerificaOpcoes" id="tutorialTabela" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ' +
      '      ' + data + ' ' +
      '    </button> ' +
      '    <div class="dropdown-menu"> ' +
      '    <button class="dropdown-item" type="button" title="Editar" id="btnEditar">Editar</button>     ' +
      '    <button class="dropdown-item" type="button" title="Excluir" id="btnExcluir">Excluir</button>     ' +
      '</div>'
    return retorno
  }

  function criarTabelaItens(data) {
    if ($.fn.DataTable.isDataTable('#tabelaItens')) {
      $('#tabelaItens').DataTable().destroy()
      $('#tabelaItens').empty()
    }

    const columns = [
      {
        data: 'id',
        title: 'Id',
        visible: false,
      },
      {
        data: 'faixa',
        title: 'Faixa',
        render: function (data) {
          return retornarBotaoOpcoes(data)
        }
      },
      {
        data: 'descricao',
        title: 'Descrição',
      },
      {
        data: 'tipo',
        title: 'Tipo',
      },
    ]

    $('#tabelaItens').DataTable({
      filter: true,
      destroy: true,
      scrollX: true,
      scrollY: '60vh',
      pageLength: 15,
      paging: true,
      autoWidth: true,
      data,
      columns,
    });
  }

  $('#tabelaItens').on('click', '#btnEditar', async function () {
    if (permissaoUsuarioLogado.ALTERA == 'S') {
      let data = $('#tabelaItens').DataTable().row($(this).parents('tr')).data()
      if (!data) {
        return
      }
      window.location.href = `pcpfaixa/${data.id}`
    } else {
      msgAlertaSemConfirmacao("Sem permissão para alterar!");
    }
  })

  $('#tabelaItens').on('dblclick', 'tr', async function () {
    if (permissaoUsuarioLogado.ALTERA == 'S') {
      let data = $('#tabelaItens').DataTable().row($(this)).data()
      if (!data) {
        return
      }
      window.location.href = `pcpfaixa/${data.id}`
    } else {
      msgAlertaSemConfirmacao("Sem permissão para alterar!");
    }
  })

  $('#tabelaItens').on('click', '#btnExcluir', async function () {
    if (permissaoUsuarioLogado.EXCLUI == 'S') {
      const row = $('#tabelaItens').DataTable().row($(this).parents('tr'))
      const data = row.data()
      if (!data) {
        return
      }
      msgAlerta(
        'Deseja excluir o registro selecionado?',
        () => { },
        () => { },
        () => excluir(data.id, row),
      )
    } else {
      msgAlertaSemConfirmacao("Sem permissão para excluir!");
    }
  })

  async function excluir(id, row) {
    if (!id) {
      return
    }
    $.LoadingOverlay('show')
    requisicao('DELETE', `/sisplan/pcpfaixa/v1/faixa?`, `ID=${id}`, '', 3600000)
      .then(async (response) => {
        if (response.status !== 204) {
          const json = await response.json()
          console.error(json?.mensagem?.mensagem)
          throw json?.mensagem?.mensagem
        }

        toastr.success("Faixa excluída com sucesso!", "Confirmação", {
          toastClass: "alert",
          iconClasses: {
            error: "alert-error",
            info: "alert-info",
            success: "alert-success",
            warning: "alert-warning",
          },
          positionClass: "toast-top-center",
          progressBar: true,
          timeOut: 1000,
          fadeOut: 1000,
          onHidden() {
            row.remove().draw(false)
          },
        }).css({
          "margin-top": "20%",
          width: "500px",
          "max-width": "500px",
        })
      }).catch((error) => msgErro(error || 'Não foi possível realizar a exclusão.')
      ).finally(() => $.LoadingOverlay('hide'))
  }

  $('#btnLimparFiltros').on('click', function () {
    $('#txtFaixa').val('')
    $('#selectTipo').val('')
  })

  consultar()
});
