import { listarFunisEtapas } from "@/requests/CRM/kanban";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";

import { useEffect, useState } from "react";
import { FaCheckCircle } from "react-icons/fa";
import * as yup from "yup";

interface IEtapaProps {
  id: string;
  descricao: string;
}

const FluxoInfo = ({ dadosCard, dadosLista }: any) => {
  const [mobileView, setMobileView] = useState<any>(false);
  const [height, setHeight] = useState<any>();
  const { logout, valuesSession, perfil, usuario } = useAuth();
  const { session } = valuesSession();
  const [etapasFunil, setEtapasFunil] = useState<any>([]);
  const { isMobile } = useScreenContext();

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

    updateHeight();

    window.addEventListener("resize", updateHeight);

    return () => {
      window.removeEventListener("resize", updateHeight);
    };
  }, []);

  useEffect(() => {
    const getSizeScreen = () => {
      setMobileView(window.innerWidth < 640);
    };
    getSizeScreen();
    window.addEventListener("resize", getSizeScreen);

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

  const [eventSchema, setEventSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { ...form } = GetForm(eventSchema, setEventSchema);

  useEffect(() => {
    listarFunisEtapas().then((res) => {
      const funilSelecionado = res.find(
        (funil: any) => funil.id_funil === dadosCard?.funil_card
      );
      if (funilSelecionado) {
        const etapasOrdenadas = funilSelecionado.etapas.sort(
          (a: any, b: any) => a.id_etapa - b.id_etapa
        );
        setEtapasFunil(etapasOrdenadas);
      }
    });
  }, [dadosCard]);

  return isMobile ? (
    <div className="transition-all z-9999999 max-sm:hidden w-full xl:w-min grid gap-2 ">
      <div
        className="xl:grid z-9999 w-full text-black dark:text-white dark:bg-form-input bg-white shadow-sm xl:shadow-xl p-3 rounded-md "
        style={{
          height: height,
        }}
      >
        <div className="felx">
          <p className="font-semibold text-sm  flex justify-center items-center text-center">
            Etapas deste Fluxo
          </p>
        </div>
        <div className="flex flex-col gap-2 mt-4 overflow-y-auto OverflowTabListEditCard">
          {etapasFunil.length > 0 ? (
            etapasFunil.map((etapa: any) => {
              const isHighlighted = etapa.titulo_etapa === dadosLista.title;
              return (
                <div
                  key={etapa.id_etapa}
                  className="w-full p-3 break-words border rounded-lg flex justify-center items-center text-center shadow-md transition-all cursor-pointer text-xs font-semibold"
                  style={{
                    backgroundColor: isHighlighted ? "#ffffff" : "#ffffff",
                    color: isHighlighted ? "#008000" : "#808080",
                    borderColor: isHighlighted ? "#008000" : "#808080",
                  }}
                >
                  {isHighlighted && (
                    <FaCheckCircle className="text-green-500 mr-2" />
                  )}
                  <span>{etapa.titulo_etapa}</span>
                </div>
              );
            })
          ) : (
            <p className="text-center text-gray-500">
              Nenhuma Etapa Encontrada
            </p>
          )}
        </div>
      </div>
    </div>
  ) : (
    <div className="transition-all z-9999999 w-full xl:w-min grid gap-2 ">
      <div
        className="xl:grid z-9999 w-65 text-black dark:text-white dark:bg-form-input bg-white shadow-sm xl:shadow-xl p-3 rounded-md "
        style={{
          maxHeight: height,
        }}
      >
        <div className="felx">
          <p className="font-semibold text-sm  flex justify-center items-center text-center">
            Etapas deste Fluxo
          </p>
        </div>
        <div className="flex flex-col gap-2 mt-4 overflow-y-auto OverflowTabListEditCard">
          {etapasFunil.length > 0 ? (
            etapasFunil.map((etapa: any) => {
              const isHighlighted = etapa.titulo_etapa === dadosLista.title;
              return (
                <div
                  key={etapa.id_etapa}
                  className="w-full p-3 break-words border rounded-lg flex justify-center items-center text-center shadow-md transition-all cursor-pointer text-xs font-semibold"
                  style={{
                    backgroundColor: isHighlighted ? "#ffffff" : "#ffffff",
                    color: isHighlighted ? "#008000" : "#808080",
                    borderColor: isHighlighted ? "#008000" : "#808080",
                  }}
                >
                  {isHighlighted && (
                    <FaCheckCircle className="text-green-500 mr-2" />
                  )}
                  <span>{etapa.titulo_etapa}</span>
                </div>
              );
            })
          ) : (
            <p className="text-center text-gray-500">
              Nenhuma Etapa Encontrada
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

export default FluxoInfo;