import { usePopupStore } from '../../store/popupStore';
import { motion } from 'framer-motion';
import { useEffect } from 'react';
import { NavLink } from 'react-router-dom';

function CookiesPopup() {
  const { isShowCookiesPopup, setIsShowCookiesPopup } = usePopupStore();

  function handlePopupClick() {
    setIsShowCookiesPopup(false);
  }

  useEffect(() => {
    if (usePopupStore.getState().isShowPopup === undefined) {
      const timeout = setTimeout(() => {
        setIsShowCookiesPopup(true);
      }, 500);
      return () => clearTimeout(timeout);
    }
  }, [setIsShowCookiesPopup]);

  return (
    <>
      {isShowCookiesPopup && (
        <motion.div
          animate={{ y: -40 }}
          transition={{ type: 'spring' }}
          className="fixed bottom-0 sm:left-10 left-1/2 max-md:left-[calc((100vw-350px)/2)] 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/cookies.png"
                  alt="popup"
                  className="w-[2.222vw] h-[2.222vw] object-cover"
                />
                <p className="heading2 font-medium">
                  Мы используем&nbsp;
                  <NavLink
                    to="/cookies"
                    className="underline-offset-2 underline"
                    onClick={handlePopupClick}
                  >
                    cookie
                  </NavLink>
                </p>
              </div>
              <p className="text1 leading-[135%] w-full">
                Они помогают нам понять, как вы взаимодействуете с нашим сайтом
                и сделать его удобнее и лучше.
              </p>
            </div>
            <button
              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 cursor-pointer"
            >
              Принять
            </button>
          </div>
        </motion.div>
      )}
    </>
  );
}

export default CookiesPopup;
