import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import Container from "@/components/Forms/Container";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarPrioridades } from "@/requests/CRUD/Prioridades/listarPrioridades";
import { cadastrarReclamacao } from "@/requests/CRUD/TiposReclamacoes/cadastrarReclamacao";
import { editarReclamacao } from "@/requests/CRUD/TiposReclamacoes/editarReclamacao";
import { listarReclamacoes } from "@/requests/CRUD/TiposReclamacoes/listarReclamacoes";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useCallback, useEffect, useState } from "react";
import FormTiposReclamacoes from "./FormTiposReclamacoes";

const ConsultaReclamacoes = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [prioridades, setPrioridades] = useState<any[]>([]);

  const columns = [
    {
      header: "ID",
      accessorKey: "id_tipo_reclamacao",
    },
    {
      header: "Status",
      accessorKey: "status_tipo_reclamacao",
    },
    {
      header: "Nome",
      accessorKey: "nome_tipo_reclamacao",
    },
    {
      header: "Prioridade",
      accessorKey: "cod_prioridade_reclamacao",
    },
    {
      header: "Responsável pelo Contato Inicial",
      accessorKey: "cod_responsavel_reclamacao",
    },
  ];

  useEffect(() => {
    Promise.all([
      listarUsuarios().then((res) => setUsuarios(res)),
      listarPrioridades().then((res) => setPrioridades(res)),
    ]).then(() => setIsLoaded(true));
  }, []);

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

  function formatarValores(data: any[]) {
    return data.map((e) => {
      e["cod_prioridade_reclamacao"] = prioridades?.find(
        (prioridade) =>
          prioridade?.id_prioridade == e["cod_prioridade_reclamacao"]
      )?.nome_prioridade;
      e["cod_responsavel_reclamacao"] = usuarios?.find(
        (usuaruio) => usuaruio?.id_usuario == e["cod_responsavel_reclamacao"]
      )?.nome_usuario;
      return e;
    });
  }
  return (
    <>
      <Breadcrumb pageName="Tipos de Reclamações" />
      <Container>
        {isLoaded ? (
          <ReactTable
            columns={columns}
            listFunction={listarReclamacoes}
            formatFunction={formatarValores}
            idCol="id_tipo_reclamacao"
            isActiveCol="status_tipo_reclamacao"
            canEdit
            canDesactive
            createFunction={cadastrarReclamacao}
            editFunction={editarReclamacao}
            Form={CustomForm}
            pageName="Tipos de Reclamações"
          />
        ) : (
          <div className="flex relative mt-[10%] overflow-hidden items-center justify-center">
            <LoaderSun />
          </div>
        )}
      </Container>
    </>
  );
};

export default ConsultaReclamacoes;