import { useCallback, useEffect, useMemo, useState } from 'react';
import { createSlug } from '@/core/utils/slug';
import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';
import odooApi from '@/core/api/odooApi';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import Image from '@/core/components/elements/Image/Image';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { AnimatePresence, motion } from 'framer-motion';
import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css';
import useTransactions from '../../transaction/hooks/useTransactions';
import currencyFormat from '@/core/utils/currencyFormat';
const { DocumentCheckIcon, PhotoIcon } = require('@heroicons/react/24/outline');
const { default: Link } = require('next/link');

const Quotationheader = (quotationCount) => {
  const auth = useAuth();
  const query = {
    context: 'quotation',
    site: auth?.webRole === null && auth?.site ? auth.site : null,
  };
  
  const router = useRouter();
  const [subTotal, setSubTotal] = useState(null);
  const [buttonLoading, SetButtonTerapkan] = useState(false);
  const itemLoading = [1, 2, 3];
  const [countQuotation, setCountQuotation] = useState(null);
  const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation, refreshQuotation, setRefreshQuotation } =
  useProductCartContext();

  const [isHovered, setIsHovered] = useState(false);
  const [isTop, setIsTop] = useState(true);
  const qotation = useMemo(() => {
    return productQuotation || [];
  }, [productQuotation]);

  const handleMouseEnter = () => {
    setIsHovered(true);
    getCart();
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  const getCart = () => {
    if (!productQuotation && auth) {
      refreshCartf();
    }
  };
  let { transactions } = useTransactions({ query });
  const refreshCartf = useCallback(async () => {
    setIsloading(true);
    let pendingTransactions = transactions?.data?.saleOrders.filter(transaction => transaction.status === 'draft');
    setProductQuotation(pendingTransactions);
    setCountQuotation(pendingTransactions?.length ? pendingTransactions?.length : pendingTransactions?.length);
    setIsloading(false);
  }, [setProductQuotation, setIsloading]);

  useEffect(() => {
    if (refreshQuotation) {
      refreshCartf();
    }
    setRefreshQuotation(false);
  }, [refreshQuotation, refreshCartf, setRefreshQuotation]);

  useEffect(() => {
    setCountQuotation(quotationCount.quotationCount);
  }, [quotationCount]);

  useEffect(() => {
    const handleScroll = () => {
      setIsTop(window.scrollY === 0);
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleCheckout = async () => {
    SetButtonTerapkan(true);
    let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`);
    router.push('/shop/quotation');
  };

  console.log("quotation",qotation)

  return (
    <div className='relative group'>
      <div>
        <Link
          href='/my/quotations'
          target='_blank'
          rel='noreferrer'
          className='flex items-center gap-x-2 !text-gray_r-12/80'
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <div className={`relative ${countQuotation > 0 && 'mr-2'}`}>
            <DocumentCheckIcon className='w-7' />
            {countQuotation > 0 && (
              <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
                {countQuotation}
              </span>
            )}
          </div>
          <span>
            List
            <br />
            Quotation
          </span>
        </Link>
      </div>
      <AnimatePresence>
        {isHovered && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1, top: isTop ? 230 : 155 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.15, top: { duration: 0.3 } }}
              className={`fixed left-0 w-full h-full bg-black/50 z-10`}
            />
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1, transition: { duration: 0.2 } }}
              exit={{ opacity: 0, transition: { duration: 0.3 } }}
              className='absolute z-10 left-0 w-96'
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: 'auto' }}
                exit={{ height: 0 }}
                className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
              >
                <div className='p-2 flex justify-between items-center'>
                  <h5 className='text-base font-semibold leading-none'>Daftar Quotation</h5>
                  <Link href='/my/quotations' class='text-sm font-medium text-red-600 underline'>
                    Lihat Semua
                  </Link>
                </div>
                <hr className='mt-3 mb-3 border border-gray-100' />
                <div className='flow-root max-h-[250px] overflow-y-auto'>
                  {!auth && (
                    <div className='justify-center p-4'>
                      <p className='text-gray-500 text-center '>
                        Silahkan{' '}
                        <Link href='/login' className='text-red-600 underline leading-6'>
                          Login
                        </Link>{' '}
                        Untuk Melihat Daftar Quotation Anda
                      </p>
                    </div>
                  )}
                  {isLoading &&
                    itemLoading.map((item) => (
                      <div key={item} role='status' className='max-w-sm animate-pulse'>
                        <div className='flex items-center space-x-4 mb- 2'>
                          <div className='flex-shrink-0'>
                            <PhotoIcon className='h-16 w-16 text-gray-500' />
                          </div>
                          <div className='flex-1 min-w-0'>
                            <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
                            <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                          </div>
                        </div>
                      </div>
                    ))}
                  {auth && qotation.length === 0 && !isLoading && (
                    <div className='justify-center p-4'>
                      <p className='text-gray-500 text-center '>
                        Tidak Ada Quotation
                      </p>
                    </div>
                  )}
                  {auth && qotation.length > 0 && !isLoading && (
                    <>
                      <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
                        {qotation &&
                          qotation?.map((product, index) => (
                            <>
                              <li className='py-1 sm:py-2'>
                                <div className='flex justify-between border p-2 flex-col gap-y-2'>
                                  <div className='flex justify-between'>
                                    <p className='tanggal text-xs'>{product.dateOrder}</p>
                                    <p className='badge-red h-fit md:text-caption-1 whitespace-nowrap'>Pending Quotation</p>
                                  </div>
                                  <div className='bagian tengah flex justify-between'>
                                    <div className='no transaksi '>  
                                      <p className='text-xs'>
                                        No. Transaksi
                                      </p>
                                      <Link href='/my/quotations' className='font-semibold text-sm text-red-500'>
                                        {product.name}
                                      </Link>
                                    </div>
                                    <div className='purchase'>
                                    <p className='text-xs'>
                                    No. Purchase Order
                                      </p>
                                      <p className='font-semibold text-red-500'>
                                      {product.purchaseOrderFile ? product.purchaseOrderFile : '-'}
                                      </p>
                                    </div>
                                  </div>
                                  <div className='bagian bawah flex justify-between'>
                                    <p className='font-semibold'>Total</p>
                                    <p className='font-semibold'>{currencyFormat(product.amountTotal)}</p>
                                  </div>
                                </div>
                              </li>
                            </>
                          ))}
                      </ul>
                      <hr />
                    </>
                  )}
                </div>
              </motion.div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
};

export default Quotationheader;