import LoaderSun from "@/components/common/Loader/LoaderSun";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import ReactTable from "@/components/ReactTable/ReactTable";
import { cadastrarFollowUpColeta } from "@/requests/CRM/FollowUps/cadastrarFollowUpColeta";
import { editarFollowUpColeta } from "@/requests/CRM/FollowUps/editarFollowUpColeta";
import { excluirFollowUpColeta } from "@/requests/CRM/FollowUps/excluirFollowUpColeta";
import { listarFollowUpsColeta } from "@/requests/CRM/FollowUps/listarFollowUpsColeta";
import { listarTodosUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { isFluxoPerdas } from "@/utils/fluxoPerdas";
import { getDateTimeBrasil } from "@/utils";
import { X } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import FormFollowUp from "./FormFollowUp";

const FollowUpCard = ({
  dadosCard,
  id_usuario,
  blockEditCard,
  isFluxoPerdas: isFluxoPerdasProp,
}: any) => {
  const columns = [
    {
      header: "ID",
      accessorKey: "id_follow_up",
    },
    {
      header: "Descrição",
      accessorKey: "descricao_follow_up",
    },
    {
      header: "Usuário Responsável",
      accessorKey: "nome_responsavel",
    },
    {
      header: "Status",
      accessorKey: "status_follow_up",
    },
    {
      header: "Com Anexo",
      accessorKey: "possui_anexo_follow_up",
    },
    {
      header: "Data da Criação",
      accessorKey: "dataHora_follow_up",
    },
    {
      header: "Usuário que criou",
      accessorKey: "cod_usuario_follow_up",
    },
  ];
  // const [openModalNotas, setOpenModalNotas] = useState<any>();
  const [followUps, setFollowUps] = useState<any[]>([]);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  const { usuario } = useAuth();
  const canManageFollowUp =
    isFluxoPerdasProp ||
    isFluxoPerdas(null, null, dadosCard?.status_coleta) ||
    !blockEditCard;

  // const handleModalNotas = () => {
  //   // const idColeta = dadosCard?.id_coleta_cliente;
  //   // setOpenModalNotas(true);
  //   // listarNotasCard(idColeta).then((res) => {
  //   //   setAllNotes(res);
  //   // });
  // };
  // const cadastroNota = (e: any) => {
  //   e.preventDefault();

  //   const { notas } = form.control._formValues;
  //   if (!notas) return toast.warning("Campo de notas vazio");
  //   const idCard = dadosCard?.id;
  //   const coleta_id_nota_kanban = dadosCard?.id_coleta_cliente;
  //   const data = { notas, idCard, coleta_id_nota_kanban, id_usuario };
  //   cadastroNotasCard(data);
  //   setNotas("");
  // };

  useEffect(() => {
    // listarFollowUpsColeta({
    //   cod_coleta_follow_up: dadosCard?.id_coleta_cliente,
    // }).then(setFollowUps);
    Promise.all([
      listarTodosUsuarios({ id_usuario: usuario?.id_usuario }).then(
        setUsuarios,
      ),
    ]).then(() => setIsLoaded(true));
  }, []);

  // const fakeList = async (): Promise<any[]> => {
  //   const promise: Promise<any[]> = new Promise((resolve, reject) =>
  //     resolve(followUps),
  //   );
  //   return promise;
  // };

  function formatFunction(arr: any[]) {
    return arr.map((e) => {
      e.nome_responsavel =
        usuarios?.find((u) => u?.id_usuario == e?.responsavel_follow_up)
          ?.nome_usuario || "Não é Necessário";
      e.cod_usuario_follow_up = usuarios?.find(
        (u) => u?.id_usuario == e?.cod_usuario_follow_up,
      )?.nome_usuario;
      e.status_follow_up =
        e?.status_follow_up == "1" ? "Concluído" : "Pendente";
      e.dataHora_follow_up = e?.dataHora_follow_up
        ? getDateTimeBrasil(undefined, e.dataHora_follow_up)
        : "";
      e.possui_anexo_follow_up = e?.anexos_data?.length > 0 ? "Sim" : "Não";
      return e;
    });
  }

  function onCreateFollowUp(data: any) {
    return cadastrarFollowUpColeta({
      ...data,
      cod_coleta_follow_up: dadosCard?.id_coleta_cliente,
      cod_usuario_follow_up: usuario?.id_usuario,
    });
  }

  function onEditFollowUp(data: any) {
    return editarFollowUpColeta({ ...data, id_usuario: usuario?.id_usuario });
  }

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

  return (
    <div className="p-3 rounded-lg bg-white ">
      {/* <div className="bg-white rounded-md p-4 text-xs">
        <Input
          onChange={(e) => setNotas(e.target.value)}
          defaultValue={notas}
          id="notas"
          formulario={form}
          disabled={blockEditCard}
          name="notas"
          rows={7}
          type="textarea"
          placeholder="Informe uma Descrição de nota para salvar"
        />
        <div className="flex gap-2 text-sm max-sm:text-xs max-sm:h-9 mt-2 h-fit justify-end w-full ">
          <Button
            type="submit"
            onClick={() => handleModalNotas()}
            className="px-4 bg-primary xl:w-fit w-full py-1"
          >
            Visualizar todas as notas
          </Button>
          {!blockEditCard && (
            <Button
              type="submit"
              onClick={cadastroNota}
              className="px-4 xl:w-fit  w-full py-1"
            >
              Salvar
            </Button>
          )}
        </div>
      </div>
      <ModalComponente
        size="xl"
        className="h-[80vh] max-w-[900px]"
        opened={openModalNotas}
        hasSaveButton={false}
        onClose={() => setOpenModalNotas(false)}
        header="Todas Notas"
      >
        <div className="h-full">
          {AllNotes.length > 0 ? (
            <div className="h-full max-h-[70vh] overflow-auto pr-2">
              <div className="grid gap-3">
                {AllNotes.map((nota: any, index: number) => {
                  const date = new Date(nota.datahora_log_kanban);
                  const dateFormat = format(date, "dd/MM HH:mm:ss");

                  const classNameSpans = "text-black text-base";
                  return (
                    <div
                      key={index}
                      className="flex items-start gap-4 rounded-lg border border-stroke bg-white p-4 shadow-sm"
                    >
                      <div className="bg-primary/90 rounded-md p-3 flex items-center justify-center">
                        <StickyNote size={28} color="white" />
                      </div>
                      <div className="flex flex-col w-full">
                        <div className="flex flex-wrap items-center justify-between gap-2 pb-2">
                          <span className={`${classNameSpans} font-medium`}>
                            {nota.nome_usuario}
                          </span>
                          <span
                            className={`${classNameSpans} text-sm text-black/60`}
                          >
                            {dateFormat}
                          </span>
                        </div>
                        <span
                          className={`${classNameSpans} whitespace-break-spaces`}
                        >
                          <b>Descrição:</b> {nota.descricao_log_kanban}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ) : (
            <div className="flex h-full flex-col items-center justify-center text-center text-sm text-black/70">
              Nenhuma nota foi feita!
            </div>
          )}
        </div>
      </ModalComponente> */}
      {isLoaded ? (
        <ReactTable
          columns={columns}
          Form={CustomForm}
          canEdit={canManageFollowUp}
          canDelete={canManageFollowUp}
          listFunction={async () =>
            listarFollowUpsColeta({
              cod_coleta_follow_up: dadosCard?.id_coleta_cliente,
            })
          }
          formatFunction={formatFunction}
          idCol="id_follow_up"
          createFunction={canManageFollowUp ? onCreateFollowUp : undefined}
          editFunction={canManageFollowUp ? onEditFollowUp : undefined}
          actionButtons={canManageFollowUp
            ? (
            data: any,
            updateTable: any,
            setIsLoading: any,
            { idCol, isActive, isActiveCol, pageName, editFunction }: any,
          ) => [
            {
              className: `navButton buttonDanger`,
              onClick: (e: any) => {
                handleSweetAlert(
                  {
                    icon: "warning",
                    title: `Excluir ${pageName}`,
                    html: `Tem certeza que deseja <b>Remover</b> o registro ${data[idCol]}?`,
                  },
                  async () => {
                    return excluirFollowUpColeta({
                      ...data,
                      id_usuario: usuario?.id_usuario,
                    }).then(() => updateTable());
                  },
                );
              },
              content: <X />,
            },
          ]
            : undefined}
          pageName="Follow-up"
        />
      ) : (
        <div className="flex justify-center w-full">
          <LoaderSun />
        </div>
      )}
    </div>
  );
};

export default FollowUpCard;