import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Container from "@/components/Forms/Container";
import ReactTable from "@/components/ReactTable/ReactTable";
import { cadastrarProblema } from "@/requests/CRUD/Problemas/cadastrarProblema";
import { editarProblemas } from "@/requests/CRUD/Problemas/editarProblemas";
import { listarProblemas } from "@/requests/CRUD/Problemas/listarProblemas";
import { useCallback, useState } from "react";
import FormProblemasNResolvidos from "./FormProblemasNResolvidos";

const ConsultaProblemasNResolvidos = () => {
  const [tiposProblemasNResolvidos, setTiposProblemasNResolvidos] = useState([
    { label: "Dúvida", value: "Dúvida" },
    { label: "Reclamação", value: "Reclamação" },
    { label: "Corretiva", value: "Corretiva" },
  ]);

  const columns = [
    {
      header: "ID",
      accessorKey: "id_problema_n_resolvido",
    },
    {
      header: "Status",
      accessorKey: "status_problema_n_resolvido",
    },
    {
      header: "Nome",
      accessorKey: "nome_problema_n_resolvido",
    },
    {
      header: "Tipo",
      accessorKey: "tipo_problema_n_resolvido",
    },
  ];

  const CustomForm = useCallback(
    (props: any) => (
      <FormProblemasNResolvidos
        tiposProblemasNResolvidos={tiposProblemasNResolvidos}
        {...props}
      />
    ),
    [tiposProblemasNResolvidos]
  );

  function formatarValores(data: any[]) {
    return data.map((e) => {
      e["tipo_problema_n_resolvido"] = tiposProblemasNResolvidos?.find(
        (tipoProblema) => tipoProblema?.value == e["tipo_problema_n_resolvido"]
      )?.label;
      return e;
    });
  }

  return (
    <>
      <Breadcrumb pageName="Motivos De Problema Não Resolvido" />
      <Container>
        <ReactTable
          columns={columns}
          listFunction={listarProblemas}
          idCol="id_problema_n_resolvido"
          isActiveCol="status_problema_n_resolvido"
          formatFunction={formatarValores}
          canEdit
          canDesactive
          createFunction={cadastrarProblema}
          editFunction={editarProblemas}
          Form={CustomForm}
          pageName="Problemas Não Resolvidos"
        />
      </Container>
    </>
  );
};

export default ConsultaProblemasNResolvidos;