import LoaderSun from "@/components/common/Loader/LoaderSun";
import { Skeleton } from "@/components/ui/skeleton";
import { listarCardInfo } from "@/requests/CRM/kanban";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useEffect, useRef, useState } from "react";

const CardSkeleton = ({ card }: any) => {
  const ref = useRef<HTMLDivElement | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  const {
    originalLists,
    setOriginalLists,
    setLists,
    cardsState,
    setCardsState,
  } = useKanbanContext();

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);

          const etapas = originalLists;
          for (let i = 0; i < etapas.length; i++) {
            const etapa = etapas[i];
            const cards = etapa?.ids_cards?.split(",");
            if (cards) {
              for (let indexCard = 0; indexCard < cards.length; indexCard++) {
                const id_card = cards[indexCard];
                if (card?.id_card == id_card) {
                  if (cardsState?.[String(id_card)]) {
                    const cardInfo = cardsState[String(id_card)];
                    setOriginalLists((prev: any) => {
                      const etapasNovas = [...prev];

                      const cardsNovos = [...(etapasNovas[i]?.cards || [])]; // cópia real
                      cardsNovos.splice(indexCard, 1, {
                        ...cardInfo,
                        isLoading: true,
                      });

                      etapasNovas.splice(i, 1, {
                        ...etapasNovas[i],
                        cards: cardsNovos,
                      });
                      setLists(etapasNovas);
                      return etapasNovas;
                    });
                  }
                  listarCardInfo({ id_card }).then((cardInfo) => {
                    setCardsState((prev: any) => ({
                      ...prev,
                      [String(id_card)]: cardInfo,
                    }));
                    setOriginalLists((prev: any) => {
                      const etapasNovas = [...prev]; // cópia do array principal
                      const etapaAtual = etapasNovas[i]; // referência da etapa
                      const cardsNovos = [...(etapaAtual?.cards || [])]; // cópia do array interno

                      const newIndexCard = cardsNovos?.findIndex(
                        (novoCard) => novoCard?.id_card == id_card,
                      );
                      if (newIndexCard >= 0) {
                        // altera a cópia
                        cardsNovos.splice(newIndexCard, 1, cardInfo);
                      }

                      // substitui a etapa no array principal
                      etapasNovas[i] = {
                        ...etapaAtual,
                        cards: cardsNovos,
                      };

                      setLists(etapasNovas);
                      return etapasNovas;
                    });
                  });
                }
              }
            }
          }
        } else {
          setIsVisible(false);
        }
      },
      {
        root: document.querySelector("#scrollContainer"), // div com overflow
        threshold: 0.35, // visível ao menos 50%
      },
    );

    observer.observe(el);
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div ref={ref}>
      {isVisible ? (
        <div className="flex relative overflow-hidden items-center justify-center w-full">
          <Skeleton className="h-50 relative dark:shadow-xl pl-4 shadow-[0_1px_4px_0_rgba(192,208,230,0.8)] mb-2.5 p-[15px] rounded-xl flex overflow-hidden items-center justify-center w-full ">
            <LoaderSun height={100} />
          </Skeleton>
        </div>
      ) : (
        <Skeleton className="h-50 relative dark:shadow-xl pl-4 shadow-[0_1px_4px_0_rgba(192,208,230,0.8)]   mb-2.5 p-[15px] rounded-xl" />
      )}
    </div>
  );
};

export default CardSkeleton;