import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarTransferenciasLinhaDePendencias } from "@/requests/CRUD/LinhaPendencias/listarTransferenciasLinhaDePendencias";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { getDateTimeBrasil, GetForm } from "@/utils";
import { useEffect, useState } from "react";

export default function ConsultaTransferenciaLinhaPendencias({
  isLoaded,
  usuarios,
  lojas,
  pendencias,
}: {
  isLoaded: boolean;
  lojas: any[];
  usuarios: any[];
  pendencias: any[];
}) {
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [logs, setLogs] = useState<any[]>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any[]>([]);

  const { isMobile } = useScreenContext();

  useEffect(() => {
    listarTiposNegocios().then(setTiposNegocios);
  }, []);

  const { handleSubmit, ...formTransferencia } = GetForm();

  const columns = [
    {
      header: "Data",
      accessorKey: "data_log_transferencia_linha_pendencias",
    },
    {
      header: "Responsável",
      accessorKey: "cod_usuario_log_transferencia_linha_pendencias",
    },
    {
      header: "Negócio",
      accessorKey: "negocio",
    },
    {
      header: "Tipo de Negócio",
      accessorKey: "nome_tipo_negocio",
    },
    {
      header: "Pendências antigas",
      accessorKey: "pendencias_antigas_linha_pendencias",
    },
    {
      header: "Novas Pendências",
      accessorKey: "pendencias_novas_linha_pendencias",
    },
  ];

  async function formatLogs(logsList: any[]) {
    return logsList.map((logData) => {
      logData["cod_usuario_log_transferencia_linha_pendencias"] = usuarios.find(
        (usuario) =>
          usuario.id_usuario ==
          logData["cod_usuario_log_transferencia_linha_pendencias"]
      )?.nome_usuario;

      logData["negocio"] =
        `${logData["id_coleta"]} - ${logData["nome_negocio_coleta"]}`;

      logData["data_log_transferencia_linha_pendencias"] = getDateTimeBrasil(
        { hour: undefined, minute: undefined, second: undefined },
        new Date(logData["data_log_transferencia_linha_pendencias"])
      );

      logData["pendencias_antigas_linha_pendencias"] = logData[
        "pendencias_antigas_linha_pendencias"
      ]
        ?.split(",")
        ?.map(
          (id_pendencia: string) =>
            pendencias?.find(
              (pendencia) => pendencia?.id_pendencia == id_pendencia
            )?.nome_pendencia
        )
        ?.join(", ");

      logData["pendencias_novas_linha_pendencias"] = logData[
        "pendencias_novas_linha_pendencias"
      ]
        ?.split(",")
        ?.map(
          (id_pendencia: string) =>
            pendencias?.find(
              (pendencia) => pendencia?.id_pendencia == id_pendencia
            )?.nome_pendencia
        )
        ?.join(", ");

      // $pendenciasDaLinhaAtual = [];
      //       if (!empty($linhaAtual)) {
      //           foreach (explode(",", $linhaAtual) as $id_pendencia) {
      //               $pendencia = array_values(array_filter($pendencias, function ($pendencia) use ($id_pendencia) {
      //                   return $pendencia["id_pendencia"] == $id_pendencia;
      //               }))[0];
      //               $pendenciasDaLinhaAtual[] = $pendencia["nome_pendencia"];
      //           }
      //       }

      //       $pendenciasDaNovaLinha = [];
      //       if (!empty($novaLinhaPendencia)) {
      //           foreach (explode(",", $novaLinhaPendencia) as $id_pendencia) {
      //               $pendencia = array_values(array_filter($pendencias, function ($pendencia) use ($id_pendencia) {
      //                   return $pendencia["id_pendencia"] == $id_pendencia;
      //               }))[0];
      //               $pendenciasDaNovaLinha[] = $pendencia["nome_pendencia"];
      //           }
      //       }

      return logData;
    });
  }

  function submitObterTransferencias(data: any) {
    setIsSubmitting(true);
    data["responsaveis"] = data?.responsaveis?.join(",");
    data["tipo_negocio"] = data?.tipo_negocio?.join(",");
    listarTransferenciasLinhaDePendencias(data)
      .then((res) => {
        setLogs(res);
      })
      .finally(() => setIsSubmitting(false));
  }

  return (
    <div className="flex flex-col gap-6">
      <div>
        <div
          // className={`p-2 w-full flex flex-${isMobile ? "col" : "row"} justify-center gap-4`}
          className={`p-2 w-full flex flex-col justify-center gap-4`}
        >
          <InputSelectComponent
            name="responsaveis"
            label="Responsável"
            options={[
              {
                label: "Todos",
                value: "*",
              },
              ...usuarios.map((usuario) => ({
                label: usuario.nome_usuario,
                value: usuario.id_usuario,
              })),
            ]}
            formulario={formTransferencia}
            isMulti
          />
          <InputSelectComponent
            name="tipo_negocio"
            label="Tipo de Negócio"
            isMulti
            options={[
              {
                label: "Todos",
                value: "*",
              },
              ...tiposNegocios.map((tipo) => ({
                label: tipo.nome_tipo_negocio,
                value: tipo.id_tipo_negocio,
              })),
            ]}
            formulario={formTransferencia}
          />
          <div className="flex flex-row flex-wrap gap-3">
            <Input
              name="data_inicial"
              label="Data Inicial"
              type="date"
              formulario={formTransferencia}
              width={"flex-1"}
            />
            <Input
              name="data_final"
              label="Data Final"
              type="date"
              formulario={formTransferencia}
              onChange={(e: any) => {
                const dataInicial =
                  formTransferencia.control._formValues.data_inicial;
                if (
                  dataInicial &&
                  new Date(e.target.value) <= new Date(dataInicial)
                ) {
                  formTransferencia.setError("data_final" as never, {
                    type: "manual",
                    message: "A data final deve ser maior que a inicial",
                  });
                  formTransferencia.setValue("data_final", "");
                }
              }}
              width={"flex-1"}
            />
          </div>

          <div className="flex flex-row flex-wrap gap-3">
            <Input
              name="nr_negocio_i"
              label="Nr. Negocio incial"
              formulario={formTransferencia}
              mascara="numerico"
              width={"flex-1"}
            />
            <Input
              name="nr_negocio_f"
              label="Nr. Negocio final"
              formulario={formTransferencia}
              mascara="numerico"
              width={"flex-1"}
            />
          </div>
        </div>
        <div className="p-2 w-full flex flex-row justify-center border-b">
          <Button
            type="button"
            onClick={handleSubmit(submitObterTransferencias)}
            loading={isSubmitting}
          >
            Consultar
          </Button>
        </div>
      </div>
      {isLoaded ? (
        <ReactTable
          formatFunction={formatLogs}
          data={logs}
          columns={columns}
          // actionButtons={(
          //   rowData: any,
          //   updateTable: any,
          //   setIsLoadingButton: any
          // ) => [
          //   {
          //     className: "bg-primary text-white",
          //     onClick: (e: any) => {
          //       setIsLoadingButton(true);
          //       setIsLoading(true);
          //       obterContatos({
          //         contatos: rowData.negocios_log_transferencia_negocios_loja,
          //       })
          //         .then(setNegocios)
          //         .finally(() => {
          //           setIsLoadingButton(false);
          //           setIsLoading(false);
          //         });
          //     },
          //     content: <Info />,
          //   },
          // ]}
        />
      ) : (
        <div className="flex flex-col justify-center items-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
}