import { CloseIcon } from '../icons/CloseIcon';
import { useEffect } from 'react';
import { motion } from 'framer-motion';
import { usePopupStore } from '../../stores/popupStore';

function TelegramPopup() {
  const { isShowPopup, setIsShowPopup, isShowCookiesPopup } = usePopupStore();

  function handlePopupClick() {
    setIsShowPopup(false);
  }

  useEffect(() => {
    if (
      usePopupStore.getState().isShowPopup === undefined &&
      !isShowCookiesPopup
    ) {
      const timeout = setTimeout(() => {
        setIsShowPopup(true);
      }, 10000);
      return () => clearTimeout(timeout);
    }
  }, [isShowCookiesPopup, setIsShowPopup]);

  return (
    <>
      {isShowPopup && !isShowCookiesPopup && (
        <motion.div
          animate={{ y: -40 }}
          transition={{ type: 'spring' }}
          className="fixed bottom-0 sm:left-10 left-1/2 max-md:left-[calc(50%-175px)] z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
        >
          <div className="bg-[#37393B]/60 rounded-2xl p-4 flex flex-col gap-5 backdrop-blur-sm">
            <div className="flex flex-col gap-2">
              <div className="flex items-center gap-2">
                <img
                  src="/images/popups/tg.png"
                  alt="popup"
                  className="lg:w-[2.222vw] lg:h-[2.222vw] w-8 h-8 object-cover"
                />
                <p className="heading2 font-medium">GRAFF.estate</p>
              </div>
              <p className="text1 leading-[135%] w-full">
                Новости разработки интерактивных решений для девелоперов в нашем
                телеграм канале
              </p>
            </div>

            <a
              href={'https://t.me/graffestate'}
              target="_blank"
              onClick={handlePopupClick}
              className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl py-[0.556vw] hover:opacity-80 transition-opacity"
            >
              Перейти
            </a>
            <button
              className="top-2 right-2 hover:bg-white hover:bg-opacity-10 group absolute flex p-px transition-colors rounded-full cursor-pointer"
              onClick={handlePopupClick}
            >
              <div className="lg:w-[1.111vw] lg:h-[1.111vw] w-4 h-4 m-auto group-hover:text-black transition-colors">
                <CloseIcon />
              </div>
            </button>
          </div>
        </motion.div>
      )}
    </>
  );
}

export default TelegramPopup;
