'use client';

import React, { useEffect, useRef, useState } from "react";
import { IoMdCloseCircleOutline } from "react-icons/io";
import { FaWhatsapp } from "react-icons/fa";
import Image from "next/image";
import Link from "next/link";
import exclusiveOffer from "../../../../../public/assets/Images/ImageHome/dogendcatmodal.webp";
import { useWebContext } from "../../providers";
import { API_URL } from "@/utils/constants/selectConstants";

const TIME_INTERVALS = [15000, 60000, 60000];

const ModalExclusivOffer = () => {
  const [modalExclusivOffer, setModalExclusivOffer] = useState<boolean>(true);
  const [showCount, setShowCount] = useState<number>(0);
  const [isDesktop, setIsDesktop] = useState<boolean>(true);
  const { dadosConfiguracoesPopUps } = useWebContext();
  const config = dadosConfiguracoesPopUps?.[1];

  const imagemNome = dadosConfiguracoesPopUps?.[1]?.PopUpsImagem;
  const imagemUrl = imagemNome ? `${API_URL}BuscarImagem.php?Imagem=${imagemNome}` : '';
  const imagemNomeButton = dadosConfiguracoesPopUps?.[1]?.PopUpsImagemIcone;
  const imagemUrlButton = imagemNomeButton ? `${API_URL}BuscarImagem.php?Imagem=${imagemNomeButton }` : '';

  const [nextAllowedTime, setNextAllowedTime] = useState<number>(Date.now() + TIME_INTERVALS[0]);

  useEffect(() => {
    const checkDeviceType = () => {
      setIsDesktop(window.innerWidth > 768);
    };
    checkDeviceType();
    window.addEventListener("resize", checkDeviceType);
    return () => {
      window.removeEventListener("resize", checkDeviceType);
    };
  }, []);

  useEffect(() => {
    if (!config) return;
    if (showCount >= TIME_INTERVALS.length) return;
    if (isDesktop) {
      const handleMouseLeave = (event: MouseEvent) => {        
        if ((event.clientY <= 0 || event.pageY <= 0) && Date.now() >= nextAllowedTime) {
          setModalExclusivOffer(true);
        }
      };
            
      const handleMouseOut = (event: MouseEvent) => {        
        const target = event.relatedTarget as Node;
        if (!target || !document.contains(target)) {
          if (event.clientY <= 0 && Date.now() >= nextAllowedTime) {
            setModalExclusivOffer(true);
          }
        }
      };

      document.addEventListener("mouseleave", handleMouseLeave);
      document.addEventListener("mouseout", handleMouseOut);
      
      return () => {
        document.removeEventListener("mouseleave", handleMouseLeave);
        document.removeEventListener("mouseout", handleMouseOut);
      };
    } else {
      const timer = setTimeout(() => {
        setModalExclusivOffer(true);
      }, TIME_INTERVALS[showCount]);

      return () => clearTimeout(timer);
    }
  }, [showCount, isDesktop, nextAllowedTime, config]);

  const handleCloseModal = () => {
    setModalExclusivOffer(false);
    if (showCount < TIME_INTERVALS.length - 1) {
      const nextIndex = showCount + 1;
      setShowCount(nextIndex);
      setNextAllowedTime(Date.now() + TIME_INTERVALS[nextIndex]);
    } else {
      setShowCount(TIME_INTERVALS.length);
    }
  };

  if (!config) {
    return null;
  }

  return (
    <>
      {modalExclusivOffer && !!dadosConfiguracoesPopUps &&
        <div
          className="h-full w-full fixed top-0 z-[9999999] bg-zinc-900/[.70] flex justify-center items-center"
          onClick={handleCloseModal}
        >
          <div className="w-[420px]" onClick={e => e.stopPropagation()}>
            <div className="flex justify-end items-center mb-5">
              <div
                className="text-white font-thin text-[32px] cursor-pointer"
                onClick={handleCloseModal}
              >
                <IoMdCloseCircleOutline />
              </div>
            </div>
            <div
              className={`flex flex-col justify-between items-center px-2 py-5 rounded-[20px]`}
              style={{
                backgroundColor: config?.PopUpsCorModal ?? ''
              }}
            >
              <div className="mb-[14px]">
                <Image src={imagemUrl} alt="" width={238.08} height={250} />
              </div>

              <h5
                className="text-[32px] text-center leading-[32px] mb-[18px] font-bold mt-2"
                style={{ color: config?.PopUpsTituloCor ?? '' }}
              >
                {config?.PopUpsTitulo ? (config.PopUpsTitulo) : ''}
              </h5>

              <div className="mt-2 mb-[18px]">
                <div
                  className="font-poppins text-[20px] leading-[20px] text-center max-w-[360px]"
                  style={{ color: config?.PopUpsDescricaoCor ?? '' }}
                  dangerouslySetInnerHTML={{
                    __html: config?.PopUpsDescricao ?? ''
                  }}
                ></div>
              </div>

              <Link
                href={config?.PopUpsBotaoLink ?? ""}
                target="_blank"
                className={`w-full max-w-[334px] h-[62px] border-[6px] rounded-xl text-white font-semibold text-[20px] flex items-center justify-center hover:brightness-110 transition mt-2 gap-2`}
                style={{
                  backgroundColor: config?.PopUpsBotaoCor ?? '',
                  border: config?.PopUpsBotaoCor ?? ''
                }}
              >
                {config?.PopUpsBotaoLabel ?? ''} {imagemUrlButton ? <Image src={imagemUrlButton} width={32}height={32} alt={config?.PopUpsBotaoLabel ?? ''} /> : ""} 
              </Link>
            </div>
          </div>
        </div >

      }
    </>
  );
};

export default ModalExclusivOffer;