import LoaderSun from "@/components/common/Loader/LoaderSun";
import ReactTable from "@/components/ReactTable/ReactTable";
import { cadastrarEmpresaTerceirizada } from "@/requests/CRUD/EmpresasTerceirizadas/cadastrarEmpresaTerceirizada";
import { editarEmpresaTerceirizada } from "@/requests/CRUD/EmpresasTerceirizadas/editarEmpresaTerceirizada";
import { listarEmpresasTerceirizadas } from "@/requests/CRUD/EmpresasTerceirizadas/listarEmpresasTerceirizadas";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useCallback, useEffect, useState } from "react";
import FormEmpresaTerceirizada from "./FormEmpresaTerceirizada";

const EmpresasTerceiras = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const columns = [
    {
      header: "Código",
      accessorKey: "id_empresa_terceirizada",
    },
    {
      header: "Status",
      accessorKey: "status_empresa_terceirizada",
    },
    {
      header: "Nome",
      accessorKey: "nome_empresa_terceirizada",
    },
    {
      header: "CNPJ",
      accessorKey: "cnpj_empresa_terceirizada",
    },
    {
      header: "IE",
      accessorKey: "ie_empresa_terceirizada",
    },
    {
      header: "Rua",
      accessorKey: "rua_empresa_terceirizada",
    },
    {
      header: "Número",
      accessorKey: "numero_empresa_terceirizada",
    },
    {
      header: "Cidade",
      accessorKey: "cidade_empresa_terceirizada",
    },
    {
      header: "Estado",
      accessorKey: "estado_empresa_terceirizada",
    },
    {
      header: "Telefone",
      accessorKey: "telefone_empresa_terceirizada",
    },
    {
      header: "Email",
      accessorKey: "email_empresa_terceirizada",
    },
    {
      header: "Responsável",
      accessorKey: "responsavel_empresa_terceirizada",
    },
    {
      header: "Tipo de Empresa",
      accessorKey: "tipo_empresa_terceirizada",
    },
    {
      header: "Data de Fundação",
      accessorKey: "data_fundacao_empresa_terceirizada",
    },
    {
      header: "Forma de Pagamento",
      accessorKey: "forma_pagamento_empresa_terceirizada",
    },
    {
      header: "Vigência início",
      accessorKey: "inicio_vigencia_empresa_terceirizada",
    },
    {
      header: "Vigência fim",
      accessorKey: "fim_vigencia_empresa_terceirizada",
    },
    {
      header: "Tipo de contrato",
      accessorKey: "tipo_contrato_empresa_terceirizada",
    },
    {
      header: "Observações",
      accessorKey: "observacoes_empresa_terceirizada",
    },
  ];

  const { cidades, estados } = useKanbanContext();

  useEffect(() => {
    if (cidades.length > 0 && estados.length > 0) {
      setIsLoaded(true);
    }
  }, [cidades, estados]);

  const CustomForm = useCallback(
    (props: any) => (
      <FormEmpresaTerceirizada {...props} cidades={cidades} estados={estados} />
    ),
    [cidades, estados]
  );

  return (
    <div>
      <h2 className="text-xl max-sm:text-sm font-bold mb-4">
        Cadastro de Empresas Terceiras
      </h2>
      {isLoaded ? (
        <ReactTable
          columns={columns}
          listFunction={listarEmpresasTerceirizadas}
          createFunction={cadastrarEmpresaTerceirizada}
          editFunction={editarEmpresaTerceirizada}
          Form={CustomForm}
          canEdit
          canDesactive
          idCol="id_empresa_terceirizada"
          isActiveCol="status_empresa_terceirizada"
          pageName="Empresa Terceirizada"
        />
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};

export default EmpresasTerceiras;