import style from '../styles/product-detail.module.css'

import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

import { Button } from '@chakra-ui/react'
import { MessageCircleIcon, Share2Icon } from 'lucide-react'
import { LazyLoadComponent } from 'react-lazy-load-image-component'
import { RWebShare } from 'react-web-share'

import useDevice from '@/core/hooks/useDevice'
import { whatsappUrl } from '~/libs/whatsappUrl'
import ProductPromoSection from '~/modules/product-promo/components/Section'
import { IProductDetail } from '~/types/product'
import { useProductDetail } from '../stores/useProductDetail'
import AddToWishlist from './AddToWishlist'
import Breadcrumb from './Breadcrumb'
import ProductImage from './Image'
import Information from './Information'
import PriceAction from './PriceAction'
import SimilarBottom from './SimilarBottom'
import SimilarSide from './SimilarSide'
import VariantList from './VariantList'
import { getAuth } from '~/libs/auth'

import { gtagProductDetail } from '@/core/utils/googleTag'

type Props = {
  product: IProductDetail
}

const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST

const ProductDetail = ({ product }: Props) => {
  const { isDesktop, isMobile } = useDevice()
  const router = useRouter()
  const auth = getAuth()
  const { setAskAdminUrl, askAdminUrl, activeVariantId, setIsApproval, isApproval } = useProductDetail()

  useEffect(() => {
    gtagProductDetail(product);
  },[product])

  useEffect(() => {
    const createdAskUrl = whatsappUrl({
      template: 'product',
      payload: {
        manufacture: product.manufacture.name,
        productName: product.name,
        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
      },
      fallbackUrl: router.asPath
    })

    setAskAdminUrl(createdAskUrl)
  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])

  useEffect(() => {
    if (typeof auth === 'object') {
      setIsApproval(auth?.feature?.soApproval);
    }
  }, []);

  return (
    <>
      <div className='md:flex md:flex-wrap'>
        <div className="w-full mb-4 md:mb-0 px-4 md:px-0">
          <Breadcrumb id={product.id} name={product.name} />
        </div>
        <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
          <div className='md:flex md:flex-wrap'>
            <div className="md:w-4/12">
              <ProductImage product={product} />
            </div>

            <div className='md:w-8/12 px-4 md:pl-6'>
              <div className='h-6 md:h-0' />

              <h1 className={style['title']}>
                {product.name}
              </h1>

              <div className='h-6 md:h-8' />

              <Information product={product} />

              <div className='h-6' />

              <div className="flex gap-x-5">
                <Button
                  as={Link}
                  href={askAdminUrl}
                  variant='link'
                  target='_blank'
                  colorScheme='gray'
                  leftIcon={<MessageCircleIcon size={18} />}
                >
                  Ask Admin
                </Button>

                <AddToWishlist productId={product.id} />

                <RWebShare
                  data={{
                    text: 'Check out this product',
                    title: `${product.name} - Indoteknik.com`,
                    url: SELF_HOST + router.asPath
                  }}
                >
                  <Button
                    variant='link'
                    colorScheme='gray'
                    leftIcon={<Share2Icon size={18} />}
                  >
                    Share
                  </Button>
                </RWebShare>
              </div>

            </div>
          </div>

          <div className='h-full'>
            {isMobile && (
              <div className='px-4 pt-6'>
                <PriceAction product={product} />
              </div>
            )}

            <div className='h-4 md:h-10' />
            {!!activeVariantId && !isApproval && <ProductPromoSection productId={activeVariantId} />}

            <div className={style['section-card']}>
              <h2 className={style['heading']}>
                Variant ({product.variant_total})
              </h2>
              <div className='h-4' />
              <VariantList variants={product.variants} />
            </div>

            <div className='h-0 md:h-6' />

            <div className={style['section-card']}>
              <h2 className={style['heading']}>
                Informasi Produk
              </h2>
              <div className='h-4' />
              <div
                className={style['description']}
                dangerouslySetInnerHTML={{ __html: !product.description || product.description == '<p><br></p>' ? 'Belum ada deskripsi' : product.description }}
              />
            </div>
          </div>
        </div>

        {isDesktop && (
          <div className="md:w-3/12">
            <PriceAction product={product} />

            <div className='h-6' />

            <div className={style['heading']}>
              Produk Serupa
            </div>

            <div className='h-4' />

            <SimilarSide product={product} />
          </div>
        )}

        <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
          <div className={style['heading']}>
            Kamu Mungkin Juga Suka
          </div>

          <div className='h-6' />

          <LazyLoadComponent>
            <SimilarBottom product={product} />
          </LazyLoadComponent>
        </div>

        <div className='h-6 md:h-0' />
      </div>
    </>
  )
}

export default ProductDetail