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 { cadastrarServico } from "@/requests/CRUD/TiposServico/cadastrarServico";
import { editarServico } from "@/requests/CRUD/TiposServico/editarServico";
import { listarServicos } from "@/requests/CRUD/TiposServico/listarServicos";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useCallback, useEffect, useState } from "react";
import FormTiposServico from "./FormTiposServico";

const ConsultaTiposServico = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [prioridades, setPrioridades] = useState<any[]>([]);
  const [categoriasTipoServico, setCategoriasTipoServico] = useState([
    {
      label: "Corretiva",
      value: "1",
    },
    {
      label: "Preventiva",
      value: "0",
    },
  ]);
  const [tiposPeriodo, setTiposPeriodo] = useState([
    {
      label: "Anos",
      value: "1",
    },
    {
      label: "Meses",
      value: "2",
    },
    {
      label: "Semanas",
      value: "3",
    },
    {
      label: "Dias",
      value: "4",
    },
  ]);

  const columns = [
    {
      header: "ID",
      accessorKey: "id_tipo_servico",
    },
    {
      header: "Status",
      accessorKey: "status_tipo_servico",
    },
    {
      header: "Nome",
      accessorKey: "nome_tipo_servico",
    },
    {
      header: "Categoria",
      accessorKey: "categoria_tipo_servico",
    },
    {
      header: "Prioridade",
      accessorKey: "cod_prioridade_servico",
    },
    {
      header: "Responsável",
      accessorKey: "cod_responsavel_servico",
    },
  ];

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

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

  function formatarValores(data: any[]) {
    return data.map((e) => {
      e["cod_prioridade_servico"] = prioridades?.find(
        (prioridade) => prioridade?.id_prioridade == e["cod_prioridade_servico"]
      )?.nome_prioridade;
      e["cod_responsavel_servico"] = usuarios?.find(
        (usuaruio) => usuaruio?.id_usuario == e["cod_responsavel_servico"]
      )?.nome_usuario;
      e.categoria_tipo_servico = categoriasTipoServico?.find(
        (categoria) => categoria?.value == e["categoria_tipo_servico"]
      )?.label;
      return e;
    });
  }

  return (
    <>
      <Breadcrumb pageName="Serviços de Manutenção" />
      <Container>
        {isLoaded ? (
          <ReactTable
            columns={columns}
            listFunction={listarServicos}
            formatFunction={formatarValores}
            idCol="id_tipo_servico"
            isActiveCol="status_tipo_servico"
            canEdit
            canDesactive
            createFunction={cadastrarServico}
            editFunction={editarServico}
            Form={CustomForm}
            pageName="Serviços de Manutenção"
          />
        ) : (
          <div className="flex relative mt-[10%] overflow-hidden items-center justify-center">
            <LoaderSun />
          </div>
        )}
      </Container>
    </>
  );
};

export default ConsultaTiposServico;