import LoaderSun from "@/components/common/Loader/LoaderSun";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { cadastrarSolicitacao } from "@/requests/CRUD/SolicVeiculos/cadastrarSolicitacao";
import { cancelarSolicitacao } from "@/requests/CRUD/SolicVeiculos/cancelarSolicitacao";
import { editarSolicitacao } from "@/requests/CRUD/SolicVeiculos/editarSolicitacao";
import { iniciarUsoSolicitacao } from "@/requests/CRUD/SolicVeiculos/iniciarUsoSolicitacao";
import { listarSolicitacoes } from "@/requests/CRUD/SolicVeiculos/listarSolicitacoes";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { listarVeiculos } from "@/requests/CRUD/Veiculos/listarVeiculos";
import { useCallback, useEffect, useState } from "react";
import { BiCheck } from "react-icons/bi";
import { FaFlagCheckered, FaPlay } from "react-icons/fa6";
import { IoCloseCircleOutline } from "react-icons/io5";
import { MdEdit } from "react-icons/md";
import FormBaixaVeiculo from "./FormBaixaVeiculo";
import FormSolicVeiculo from "./FormSolicVeiculo";
import ModalAprovarSolicitacao from "./ModalAprovarSolicitacao";

const columns = [
  {
    header: "Código",
    accessorKey: "id_solicitacao",
  },
  {
    header: "Status",
    accessorKey: "status_solicitacao",
    cell: (info: any) =>
      labelsStatusSolicitacao[info.getValue()] ?? info.getValue(),
  },
  {
    header: "Data da Solicitação",
    accessorKey: "data_solicitacao",
  },
  {
    header: "Solicitante",
    accessorKey: "nome_usuario",
  },
  {
    header: "Departamento",
    accessorKey: "departamento",
  },
  {
    header: "Veículo",
    accessorKey: "placa_veiculo",
  },
  {
    header: "Motorista",
    accessorKey: "motorista_solicitacao",
  },
  {
    header: "Destino",
    accessorKey: "destino_solicitacao",
  },
  {
    header: "Previsão de Saída",
    accessorKey: "data_previsao_saida_solicitacao",
  },
  {
    header: "Previsão de Retorno",
    accessorKey: "data_previsao_retorno_solicitacao",
  },
  {
    header: "Data de Saída",
    accessorKey: "data_saida_solicitacao",
  },
  {
    header: "Data de Retorno",
    accessorKey: "data_retorno_solicitacao",
  },
];

const labelsStatusSolicitacao: { [key: string]: string } = {
  "0": "Pendente",
  "1": "Aprovada",
  "2": "Em Andamento",
  "3": "Finalizada",
  "-1": "Cancelada",
};

const SolicVeiculos = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [veiculos, setVeiculos] = useState<any[]>([]);
  const [solicitacaoParaAprovar, setSolicitacaoParaAprovar] =
    useState<any>(null);
  const [solicitacaoParaFinalizar, setSolicitacaoParaFinalizar] =
    useState<any>(null);

  useEffect(() => {
    Promise.all([
      listarUsuarios().then(setUsuarios),
      listarVeiculos().then(setVeiculos),
    ]).finally(() => setIsLoaded(true));
  }, []);

  const CustomForm = useCallback(
    (props: any) => (
      <FormSolicVeiculo {...props} usuarios={usuarios} veiculos={veiculos} />
    ),
    [usuarios, veiculos]
  );

  return (
    <div className="bg-white dark:bg-black border border-coolGray-200 dark:border-trueGray-800 rounded-lg shadow-sm p-4">
      <h2 className="text-xl max-sm:text-sm font-bold mb-4">
        Solicitação de Veículos
      </h2>
      {isLoaded ? (
        <ReactTable
          columns={columns}
          listFunction={listarSolicitacoes}
          createFunction={cadastrarSolicitacao}
          editFunction={editarSolicitacao}
          Form={CustomForm}
          idCol="id_solicitacao"
          pageName="Solicitação de Veículo"
          actionButtons={(
            rowData: any,
            updateTable: any,
            _setIsLoading: any,
            { openEdit }: any
          ) => [
            {
              title: "Editar",
              className: "bg-warning text-white",
              content:
                rowData.status_solicitacao == "0" ? <MdEdit /> : undefined,
              onClick: () => openEdit(rowData),
            },
            {
              title: "Aprovar",
              className: "bg-primary text-white",
              content:
                rowData.status_solicitacao == "0" ? <BiCheck /> : undefined,
              onClick: () =>
                setSolicitacaoParaAprovar({ data: rowData, updateTable }),
            },
            {
              title: "Iniciar Uso",
              className: "bg-warning text-white",
              content:
                rowData.status_solicitacao == "1" ? <FaPlay /> : undefined,
              onClick: () => {
                if (["-1", "0"].includes(rowData.status_veiculo)) {
                  handleSweetAlert({
                    icon: "error",
                    title: "Veículo Indisponível",
                    html: "Este veículo está em <b>Manutenção</b> ou <b>Inativo</b> e não pode iniciar o uso.",
                    showDenyButton: false,
                    confirmButtonText: "Ok",
                  });
                  return;
                }
                handleSweetAlert(
                  {
                    icon: "warning",
                    title: "Iniciar Uso do Veículo",
                    html: `Confirma o início do uso do veículo <b>${rowData.placa_veiculo}</b>?`,
                  },
                  () => {
                    iniciarUsoSolicitacao({
                      id_solicitacao: rowData.id_solicitacao,
                    }).then(() => updateTable());
                  }
                );
              },
            },
            {
              title: "Finalizar",
              className: "bg-success text-white",
              content:
                rowData.status_solicitacao == "2" ? (
                  <FaFlagCheckered />
                ) : undefined,
              onClick: () =>
                setSolicitacaoParaFinalizar({ data: rowData, updateTable }),
            },
            {
              title: "Cancelar",
              className: "bg-danger text-white",
              content:
                rowData.status_solicitacao != "2" &&
                rowData.status_solicitacao != "3" ? (
                  <IoCloseCircleOutline />
                ) : undefined,
              onClick: () => {
                handleSweetAlert(
                  {
                    icon: "error",
                    title: "Cancelar Solicitação",
                    html: "Tem certeza que deseja <b>Cancelar</b> esta solicitação?",
                  },
                  () => {
                    cancelarSolicitacao({
                      id_solicitacao: rowData.id_solicitacao,
                    }).then(() => updateTable());
                  }
                );
              },
            },
          ]}
        />
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
      {solicitacaoParaAprovar && (
        <ModalAprovarSolicitacao
          solicitacao={solicitacaoParaAprovar.data}
          onClose={() => setSolicitacaoParaAprovar(null)}
          onUpdated={() => solicitacaoParaAprovar.updateTable()}
        />
      )}
      {solicitacaoParaFinalizar && (
        <FormBaixaVeiculo
          solicitacao={solicitacaoParaFinalizar.data}
          onClose={() => setSolicitacaoParaFinalizar(null)}
          onUpdated={() => solicitacaoParaFinalizar.updateTable()}
        />
      )}
    </div>
  );
};

export default SolicVeiculos;