import AvatarInput from "@/components/Forms/InputAvatar";
import PopoverResponsaveis from "@/components/Kanban/popoverResponsaveis";
import ModalComponente from "@/components/Modal/ModalComponente";
import { listarUsuarioPeloId } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { GetForm } from "@/utils";
import { addDays, differenceInDays, format, parseISO } from "date-fns";
import { Fragment, useEffect, useState } from "react";
import * as yup from "yup";

const CardInfoDados = ({
  dadosCard,
  dadosCliente,
  dadosLista,
  updateDados,
  closeModal,
}: any) => {
  const { listarDadosKanban } = useKanbanContext();
  const [height, setHeight] = useState<any>();

  const { logout, valuesSession, perfil, usuario } = useAuth();
  const { session } = valuesSession();
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, isSubmitting, ...form } = GetForm(
    yupSchema,
    setYupSchema,
  );

  useEffect(() => {
    function updateHeight() {
      const windowHeight = window.innerHeight;
      const reducedHeight = windowHeight - windowHeight * 0.3; // 30% reduction
      setHeight(reducedHeight + "px");
    }

    // Initial height calculation
    updateHeight();

    // Event listener for window resize
    window.addEventListener("resize", updateHeight);

    // Clean up the event listener
    return () => {
      window.removeEventListener("resize", updateHeight);
    };
  }, []);

  const [diasAberto, setDiasAberto] = useState(0);
  const [dataValidade, setDataValidade] = useState("");
  const [openModalResponsavel, setOpenModalResponsavel] = useState(false);
  const [allResponsaveis, setAllResponsaveis] = useState<any>([]);
  const [cargoResponsavel, setCargoResponsavel] = useState<any>();
  const [responsaveis, setResponsaveis] = useState<any>([]);

  useEffect(() => {
    if (dadosCard && dadosCard.responsaveis) {
      const fetchResponsaveis = async () => {
        const responsaveisPromises = Object.entries(dadosCard.responsaveis)
          .filter(([nome, id]) => id) // Filtra apenas IDs que existem
          .map(async ([nome, id]) => {
            const usuario = await listarUsuarioPeloId(id);
            return [nome, usuario];
          });

        const results = await Promise.all(responsaveisPromises);
        const responsaveisMap = results.reduce((acc: any, [nome, usuario]) => {
          acc[nome] = usuario;
          return acc;
        }, {});

        setResponsaveis(responsaveisMap);
      };
      fetchResponsaveis();
    }
  }, [dadosCard?.responsaveis]);

  const ordemDesejada = [
    "Administrativo",
    "Vendedor",
    "Técnico",
    "Pré-Vendedor",
    "Instalador",
  ];

  useEffect(() => {
    if (responsaveis) {
      setAllResponsaveis(
        ordemDesejada.map((posicao) => {
          if (responsaveis[posicao]) {
            return [posicao, responsaveis[posicao]];
          } else {
            return [
              posicao,
              {
                nome_usuario: "Usuário não definido",
                cargo_perfil: "N/A",
                avatar_usuario: "placeholder", // Adicione o caminho para a imagem de placeholder
              },
            ];
          }
        }),
      );
    }
  }, [responsaveis, dadosCard?.responsaveis]);

  useEffect(() => {
    const dataCriacao = parseISO(dadosCard?.datahora_na_lista);

    // Calcula a data de validade
    const dataValidadeCalculada = addDays(
      dataCriacao,
      parseInt(dadosLista?.validade_lista),
    );

    // Calcula a diferença em dias entre a data atual e a data de criação
    const diasAbertoCalculado = differenceInDays(new Date(), dataCriacao);

    // Formata a data de validade e define no estado
    setDataValidade(format(dataValidadeCalculada, "dd/MM"));

    // Define a quantidade de dias aberto no estado
    setDiasAberto(diasAbertoCalculado);
  }, []);

  const dados = [
    {
      campo: "Dias em Aberto:",
      valor: diasAberto,
    },
    {
      campo: "Visualizações:",
      valor: dadosCard?.visualizacao,
    },
    {
      campo: "Proposta(s):",
      valor: dadosCard?.propostas.length,
    },
    {
      campo: "Validade:",
      valor: dataValidade,
    },
  ];

  return (
    <Fragment>
      <div className="grid gap-2">
        <div
          className="grid xl:w-75 w-full transition-all ease-linear z-9999 ficaComOScroll shadow-sm xl:shadow-sm bg-white dark:bg-form-input rounded-md p-3"
          style={{ height: height, position: "relative", top: "0" }}
        >
          <p className="mt-5 text-sm  text-black font-bold">Responsáveis</p>
          <div className="flex gap-1 px-2 h-fit font-medium items-center text-sm w-fit rounded mt-3  p-[2px] justify-center text-center">
            <div className="flex gap-2 justify-center items-center">
              {allResponsaveis.map(([nome, responsavel]: any, index: any) => {
                return (
                  <div
                    key={index}
                    className={`mr-2 cursor-pointer border-[2px] rounded-full ${responsavel.nome_usuario === "Usuário não definido" ? "border-red-500" : "border-stroke"}`}
                    onClick={() => {
                      if (
                        perfil.permite_alterar_responsaveis == 0 &&
                        perfil.id_perfil != 1000
                      )
                        return;
                      if (
                        (dadosCard.status_coleta == 6 ||
                          dadosCard.status_coleta == 7 ||
                          dadosCard.status_coleta == 8) &&
                        (nome == "Pré-Vendedor" || nome == "Vendedor")
                      )
                        return;
                      if (
                        perfil.cargo_perfil == 4 ||
                        perfil.cargo_perfil == 1
                      ) {
                        setOpenModalResponsavel(true);
                        setCargoResponsavel(nome);
                      } else if (
                        responsavel.cargo_perfil == perfil.cargo_perfil
                      ) {
                        setOpenModalResponsavel(true);
                        setCargoResponsavel(responsavel.cargo_perfil);
                      }
                    }}
                  >
                    <AvatarInput
                      nome_responsavel={responsavel.nome_usuario}
                      cargo_responsavel={nome}
                      height="9"
                      width="9"
                      imageValue={
                        responsavel.avatar_usuario && responsavel.avatar_usuario
                      }
                    />
                    {responsavel.nome_usuario !== "Usuário não definido" && (
                      <div className="border-l border-black border-solid h-auto cursor-pointer"></div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          {dados.map((campo, index) => (
            <div key={index} className="flex flex-wrap gap-2  py-1">
              <aside className="text-sm my-[1px] font-medium w-fit text-black dark:text-white">
                {campo.campo}
              </aside>
              <aside className="text-sm my-[1px] m-0 w-fit  dark:text-bodydark1">
                {campo.valor}
              </aside>
            </div>
          ))}
        </div>
      </div>

      <ModalComponente
        className="overflow-hidden max-w-md h-[500px]"
        defaultW="w-96"
        header={`Troca de ${cargoResponsavel}`}
        onClose={() => setOpenModalResponsavel(false)}
        hasSaveButton={false}
        opened={openModalResponsavel}
      >
        <PopoverResponsaveis
          cargoUsuario={perfil.cargo_perfil}
          statusColeta={dadosCard?.status_coleta}
          idColeta={dadosCard?.id_coleta_cliente}
          defaultValues={responsaveis}
          openState={setOpenModalResponsavel}
          cargoSelected={cargoResponsavel || perfil.cargo_perfil}
          ordemDesejada={ordemDesejada}
        />
      </ModalComponente>
    </Fragment>
  );
};

export default CardInfoDados;