import Container from "@/components/Forms/Container";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { cadastrarTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/cadastrarTiposEdificacao";
import { deletarTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/deletarTiposEdificacao";
import { editarTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/editarTiposEdificacao";
import { listarTiposEdificacao } from "@/requests/CRUD/TiposEdificacao/listarTiposEdificacao";
import { formatAndaresTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { FieldValues } from "react-hook-form";
import { BiTrash } from "react-icons/bi";
import FormTiposEdificacao from "./FormTiposEdificacao";

const ConsultaTiposEdificacao = () => {
  const columns = [
    {
      header: "ID",
      accessorKey: "id_tipo_edificacao",
    },
    {
      header: "Status",
      accessorKey: "status_tipo_edificacao",
    },
    {
      header: "Descrição",
      accessorKey: "descricao_tipo_edificacao",
    },
    {
      header: "Térreo",
      accessorKey: "is_terreo",
    },
    {
      header: "Andares",
      accessorKey: "andares_tipo_edificacao",
    },
  ];

  const formatFunction = (data: any[]) =>
    data.map((item) => ({
      ...item,
      is_terreo: item.is_terreo === "1" || item.is_terreo === 1 ? "Sim" : "Não",
      andares_tipo_edificacao: formatAndaresTipoEdificacao(item),
    }));

  const onSubmitFunction = async (data: FieldValues) =>
    cadastrarTiposEdificacao(data);

  const editFunction = async (data: FieldValues) => editarTiposEdificacao(data);

  return (
    <Container>
      <ReactTable
        columns={columns}
        listFunction={listarTiposEdificacao}
        formatFunction={formatFunction}
        idCol="id_tipo_edificacao"
        isActiveCol="status_tipo_edificacao"
        canEdit
        canDesactive
        editFunction={editFunction}
        createFunction={onSubmitFunction}
        Form={FormTiposEdificacao}
        pageName="Tipos de Edificação"
        actionButtons={(data: any, updateTable: any, setIsLoading: any) => {
          const emUso = +(data.qtd_negocios_tipo_edificacao ?? 0) > 0;

          if (emUso) {
            return [];
          }

          return [
            {
              className: "navButton buttonDanger",
              onClick: (e: any) => {
                handleSweetAlert(
                  {
                    icon: "warning",
                    title: `Deletar o Tipo de Edificação ${data.descricao_tipo_edificacao}?`,
                    html: `Tem certeza que deseja <b>deletar</b> o Tipo de Edificação </br> <b>${data.descricao_tipo_edificacao}</b>?`,
                  },
                  async () => {
                    setIsLoading(true);
                    return deletarTiposEdificacao(data.id_tipo_edificacao)
                      .then(() => updateTable())
                      .finally(() => setIsLoading(false));
                  }
                );
              },
              content: <BiTrash />,
            },
          ];
        }}
      />
    </Container>
  );
};

export default ConsultaTiposEdificacao;