import dynamic from 'next/dynamic'
import BasicFooter from '../elements/Footer/BasicFooter'
import Image from 'next/image'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { useEffect, useState } from 'react'
import axios from 'axios'
import odooApi from '@/core/api/odooApi'
import { useRouter } from 'next/router'
import { getURL } from 'next/dist/shared/lib/utils'
import productApi from '@/lib/product/api/productApi'
import { getAuth } from '@/core/utils/auth'
import { createSlug, getIdFromSlug } from '@/core/utils/slug'

const Navbar = dynamic(() => import('../elements/Navbar/Navbar'))
const AnimationLayout = dynamic(() => import('./AnimationLayout'))

const BasicLayout = ({ children }) => {
  const [templateWA, setTemplateWA] = useState(null)
  const [payloadWA, setPayloadWa] = useState(null)

  const router = useRouter()

  useEffect(() => {
    const getIP = async () => {
      const ip = await odooApi('GET', '/api/ip-address')
      const data = {
        page_title: document.title,
        url: window.location.href,
        ip: ip
      }
      axios.get(`/api/user-activity?page_title=${data.page_title}&url=${data.url}&ip=${data.ip}`)
    }
    getIP()
    if (router.pathname === '/shop/product/[slug]') {
      const authToken = getAuth().token

      const { slug } = router.query
      const getProduct = async () => {
        let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
        setPayloadWa({
          name: product[0]?.name,
          manufacture: product[0]?.manufacture.name,
          url: createSlug('/shop/product/', product[0]?.name, product[0]?.id, true)
        })
      }
      getProduct()
      setTemplateWA('product')
    }
  }, [])
  return (
    <>
      <Navbar />
      <AnimationLayout>
        {children}
        <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
          <a
            href={whatsappUrl(templateWA, payloadWA)}
            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