import dynamic from 'next/dynamic';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useEffect, useState, useRef } from 'react';

import { useProductContext } from '@/contexts/ProductContext';
import odooApi from '@/core/api/odooApi';
import whatsappUrl from '@/core/utils/whatsappUrl';
import Navbar from '../elements/Navbar/Navbar';
import { AnimatePresence, motion } from 'framer-motion';

const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
  ssr: false,
});
const BasicFooter = dynamic(() => import('../elements/Footer/BasicFooter'), {
  ssr: false,
});

const BasicLayout = ({ children }) => {
  const [templateWA, setTemplateWA] = useState(null);
  const [payloadWA, setPayloadWa] = useState(null);
  const [urlPath, setUrlPath] = useState(null);
  const [isVisible, setIsVisible] = useState(true);

  const router = useRouter();
  const whatsappRef = useRef(null);

  const { product } = useProductContext();
  useEffect(() => {
    if (
      router.pathname === '/shop/product/[slug]' ||
      router.pathname === '/shop/product/variant/[slug]'
    ) {
      setPayloadWa({
        name: product?.name,
        manufacture: product?.manufacture.name,
        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath,
      });
      setTemplateWA('product');

      setUrlPath(router.asPath);
    }
  }, [product, router]);

  const recordActivity = async (pathname) => {
    const ONLY_ON_PATH = false;
    const recordedPath = [];
    if (ONLY_ON_PATH && !recordedPath.includes(pathname)) return;

    const ip = await odooApi('GET', '/api/ip-address');
    const data = new URLSearchParams({
      page_title: document.title,
      url: window.location.href,
      ip,
    });

    fetch(`/api/user-activity?${data.toString()}`);
  };

  useEffect(() => {
    recordActivity(router.pathname);
  }, [router.pathname]);

  useEffect(() => {
    const handleMouseOut = (event) => {
      if (event.clientY <= 0) {
        setIsVisible(false);
      } else {
        setIsVisible(true);
      }
    };

    window.addEventListener('mouseout', handleMouseOut);

    return () => {
      window.removeEventListener('mouseout', handleMouseOut);
    };
  }, []);

  const getWhatsappPosition = () => {
    if (whatsappRef.current) {
      const rect = whatsappRef.current.getBoundingClientRect();
      return {
        x: rect.left + 80,
        y: rect.top + 40,
        width: rect.width,
        height: rect.height,
      };
    }
    return { x: 0, y: 0, width: 0, height: 0 };
  };

  return (
    <>
      {!isVisible && (
        <AnimatePresence>
          <motion.div
            initial={{ opacity: 1 }}
            animate={[
              { opacity: 0.6, x: window.innerWidth - 100, y: window.innerHeight - 100, scale: 0.4 },
              {
                opacity: 0,
                x: getWhatsappPosition().x - window.innerWidth / 2,
                y: getWhatsappPosition().y - window.innerHeight / 2,
                scale: 0,
              },
            ]}
            exit={{ opacity: 1 }}
            transition={{ duration: 1 }}
            className={`fixed left-0 w-full h-full bg-[#4FB84A]/50 z-[90]`}
          />
        </AnimatePresence>
      )}
      <Navbar />
      <AnimationLayout>
        {children}
        <div ref={whatsappRef} className="fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50">
          <a
            href={whatsappUrl(templateWA, payloadWA, urlPath)}
            className="py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center"
            rel="noopener noreferrer"
            target="_blank"
          >
            <Image
              src="/images/socials/WHATSAPP.svg"
              alt="Whatsapp"
              className="block sm:hidden"
              width={36}
              height={36}
            />
            <Image
              src="/images/socials/WHATSAPP.svg"
              alt="Whatsapp"
              className="hidden sm:block"
              width={44}
              height={44}
            />
            <span className="text-white font-bold ml-1.5">Whatsapp</span>
          </a>
        </div>
      </AnimationLayout>
      <BasicFooter />
    </>
  );
};

export default BasicLayout;
