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 { cadastrarAtendimento } from "@/requests/CRUD/Atendimento/cadastrarAtendimento";
import { editarAtendimento } from "@/requests/CRUD/Atendimento/editarAtendimento";
import { listarAtendimentos } from "@/requests/CRUD/Atendimento/listarAtendimento";
import { listarContatos } from "@/requests/CRUD/Cliente/listarClientes";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarPrioridades } from "@/requests/CRUD/Prioridades/listarPrioridades";
import { listarDuvidas } from "@/requests/CRUD/TiposDuvida/listarDuvidas";
import { listarReclamacoes } from "@/requests/CRUD/TiposReclamacoes/listarReclamacoes";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useCallback, useEffect, useState } from "react";
import { MdEdit } from "react-icons/md";
import FormAtendimento from "./FormAtendimento";

export const tipos_atendimentos = [
  {
    label: `Dúvida`,
    value: `3`,
  },
  {
    label: `Reclamação`,
    value: `4`,
  },
];

const ConsultaTipoAtendimento = () => {
  const columns = [
    {
      header: "ID",
      accessorKey: "id_cham",
    },
    {
      header: "Status",
      accessorKey: "status_cham",
    },
    {
      header: "Tipo de Reclamação",
      accessorKey: "cod_tipo_reclamacao_cham",
    },
    {
      header: "Tipo de Dúvida",
      accessorKey: "cod_tipo_duvida_cham",
    },
    {
      header: "Cliente",
      accessorKey: "cod_cliente_cham",
    },
  ];

  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [prioridadeOptions, setPrioridadeOptions] = useState<any[]>([]);
  const [optionsCliente, setOptionsCliente] = useState<any[]>([]);
  const [tiposDuvida, setTiposDuvida] = useState<any[]>([]);
  const [tiposReclamacoes, setTiposReclamacoes] = useState<any[]>([]);
  const [lojasOptions, setLojasOptions] = useState<any[]>([]);
  const [isLoaded, setIsloaded] = useState(false);

  const { usuario } = useAuth();

  useEffect(() => {
    Promise.all([
      listarUsuarios(usuario?.id_loja_usuario).then((e) => setUsuarios(e)),

      listarPrioridades().then((prioridades) => {
        const prioridadesComStatus1 = prioridades.filter(
          (prioridade: any) => prioridade.status_prioridade == 1
        );
        setPrioridadeOptions(prioridadesComStatus1);
      }),
      listarContatos().then((e) => {
        const clienteStatus1 = e.filter(
          (filtro: any) => filtro.status_cliente == 1
        );
        setOptionsCliente(clienteStatus1);
      }),
      listarDuvidas().then((res) =>
        setTiposDuvida(
          res.filter((tipo: any) => tipo?.status_tipo_duvida == "1")
        )
      ),
      listarReclamacoes().then((res) =>
        setTiposReclamacoes(
          res
            .filter((tipo: any) => tipo?.status_tipo_reclamacao == "1")
            .sort((a: any, b: any) =>
              a.nome_tipo_reclamacao.localeCompare(b.nome_tipo_reclamacao)
            )
        )
      ),
    ]).finally(() => setIsloaded(true));
  }, []);

  useEffect(() => {
    if (usuario) {
      listarLojas().then((res) => {
        const idsLojaUsuario = usuario?.loja_usuario
          ?.split(",")
          ?.map((id: any) => id.trim());

        const filtered = res.filter((loja: any) =>
          idsLojaUsuario?.includes(loja.id_loja?.toString())
        );

        setLojasOptions(filtered);
      });
    }
  }, [usuario]);

  function formatListAtendimentos(arr: any[]) {
    return arr.map((e) => {
      e.cod_tipo_duvida_cham = tiposDuvida?.find(
        (tipo) => tipo.id_tipo_duvida == e.cod_tipo_duvida_cham
      )?.nome_tipo_duvida;
      e.cod_tipo_reclamacao_cham = tiposReclamacoes?.find(
        (tipo) => tipo.id_tipo_reclamacao == e.cod_tipo_reclamacao_cham
      )?.nome_tipo_reclamacao;
      e.cod_cliente_cham = optionsCliente?.find(
        (cliente) => cliente.id_cliente == e.cod_cliente_cham
      )?.nome_cliente;
      return e;
    });
  }

  const CustomForm = useCallback(
    (props: any) => (
      <FormAtendimento
        {...props}
        tipos_atendimentos={tipos_atendimentos}
        usuarios={usuarios}
        prioridadeOptions={prioridadeOptions}
        optionsCliente={optionsCliente}
        tiposDuvida={tiposDuvida}
        tiposReclamacoes={tiposReclamacoes}
        lojasOptions={lojasOptions}
      />
    ),
    [
      usuarios,
      prioridadeOptions,
      optionsCliente,
      tiposDuvida,
      tiposReclamacoes,
      lojasOptions,
    ]
  );

  return (
    <>
      <Breadcrumb pageName="Consulta de Atendimento" />
      <Container>
        {isLoaded ? (
          <ReactTable
            columns={columns}
            listFunction={async () => listarAtendimentos()}
            formatFunction={formatListAtendimentos}
            idCol="id_cham"
            isActiveCol="status_cham"
            // canEdit
            // canDesactive
            createFunction={cadastrarAtendimento}
            editFunction={editarAtendimento}
            Form={CustomForm}
            pageName="Atendimento"
            actionButtons={(
              rowData: any,
              updateTable: any,
              setIsLoading: any,
              { rowOriginal, openEdit }
            ) =>
              rowOriginal?.max_status_tarefa == "0"
                ? [
                    {
                      className: "navButton buttonWarning",
                      onClick: (e: any) => {
                        openEdit(rowOriginal);
                      },
                      content: <MdEdit />,
                    },
                  ]
                : []
            }
          />
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </Container>
    </>
  );
};

export default ConsultaTipoAtendimento;