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,
  } = 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?.length === 0) && auth) {
      refreshCartf();
    }
  };
  let { transactions } = useTransactions({ query });

  const refreshCartf = useCallback(async () => {
    setIsloading(true);
    let pendingTransactions = transactions?.data?.saleOrders.filter(
      (transaction) => transaction.status === 'waiting'
    );
    setProductQuotation(pendingTransactions);
    setCountQuotation(
      pendingTransactions?.length
        ? pendingTransactions?.length
        : pendingTransactions?.length
    );
    setIsloading(false);
  }, [setProductQuotation, setIsloading]);

  useEffect(() => {
    if (!qotation) return;

    let calculateTotalDiscountAmount = 0;
    for (const product of qotation) {
      // if (qotation.quantity == '') continue
      calculateTotalDiscountAmount += product.amountUntaxed;
    }
    let subTotal = calculateTotalDiscountAmount;
    setSubTotal(subTotal);
  }, [qotation]);

  useEffect(() => {
    if (refreshCart) {
      refreshCartf();
    }
    setRefreshCart(false);
  }, [refreshCartf, setRefreshCart]);

  useEffect(() => {
    setCountQuotation(quotationCount.quotationCount);
    setProductQuotation(quotationCount.data);
  }, [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('/my/transactions');
  };

  return (
    <div className='relative group'>
      <div>
        <Link
          href='/my/transactions'
          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 />
            Transactions
          </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 Transaksi
                  </h5>
                </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 Transaksi 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 Transaksi
                      </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 hover:border-red-500'>
                                  <Link
                                    href={`/my/transactions/${product?.id}`}
                                    className='hover:border-red-500'
                                  >
                                    <div className='flex justify-between mb-2'>
                                      <div className='flex flex-row items-center'>
                                        <p className='tanggal text-xs opacity-80 mr-[2px]'>
                                          Sales :{' '}
                                        </p>
                                        <p className='tanggal text-xs text-red-500 font-semibold'>
                                          {product.sales}
                                        </p>
                                      </div>
                                      <div className='flex flex-row items-center'>
                                        <p className='text-xs opacity-80 mr-[2px]'>
                                          Status :
                                        </p>
                                        <p className='badge-yellow h-fit text-xs whitespace-nowrap'>
                                          Pesanan Diproses
                                        </p>
                                      </div>
                                    </div>
                                    <div className='flex justify-between mb-2'>
                                      <div className='flex flex-col items-start'>
                                        <p className=' text-xs opacity-80 mr-[2px]'>
                                          No. Transaksi
                                        </p>
                                        <p className=' text-sm text-red-500 font-semibold'>
                                          {' '}
                                          {product.name}
                                        </p>
                                      </div>
                                      <div className='flex flex-col items-end'>
                                        <p className='text-xs opacity-80 mr-[2px]'>
                                          No. Purchase Order
                                        </p>
                                        <p className='font-semibold text-sm text-red-500'>
                                          {' '}
                                          {product.purchaseOrderName
                                            ? product.purchaseOrderName
                                            : '-'}
                                        </p>
                                      </div>
                                    </div>
                                    {/* <div className='my-0.5 h-0.5 bg-gray-200'></div> */}
                                    <hr className='mt-3 mb-3 border border-gray-100' />
                                    <div className='bagian bawah flex justify-between mt-2'>
                                      <p className='font-semibold text-sm'>
                                        Total
                                      </p>
                                      <p className='font-semibold text-sm'>
                                        {currencyFormat(product.amountUntaxed)}
                                      </p>
                                    </div>
                                  </Link>
                                </div>
                              </li>
                            </>
                          ))}
                      </ul>
                      <hr />
                    </>
                  )}
                </div>
                {auth && qotation.length > 0 && !isLoading && (
                  <>
                    <div className='mt-3 ml-1'>
                      <span className='text-gray-400 text-caption-2'>
                        Subtotal Sebelum PPN :{' '}
                      </span>
                      <span className='font-semibold text-red-600'>
                        {currencyFormat(subTotal)}
                      </span>
                    </div>
                    <div className='mt-5 mb-2'>
                      <button
                        type='button'
                        className='btn-solid-red rounded-lg w-full'
                        onClick={handleCheckout}
                        disabled={buttonLoading}
                      >
                        {buttonLoading ? 'Loading...' : 'Lihat Semua'}
                      </button>
                    </div>
                  </>
                )}
              </motion.div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
};

export default Quotationheader;