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

import React, { useEffect, useMemo } from 'react'
import Link from 'next/link'
import { Button, Tooltip } from '@chakra-ui/react'

import { getAuth } from '~/common/libs/auth'
import { useCartStore } from '../stores/useCartStore'

import CartItem from './Item'
import CartSummary from './Summary'

const CartDetail = () => {
  const auth = getAuth()

  const { loadCart, cart, summary } = useCartStore()

  useEffect(() => {
    if (typeof auth === 'object' && !cart) loadCart(auth.id)
  }, [auth, loadCart, cart])

  const hasSelectedPromo = useMemo(() => {
    if (!cart) return false
    for (const item of cart.products) {
      if (item.cart_type === 'promotion' && item.selected) return true
    }
    return false
  }, [cart])

  const hasSelected = useMemo(() => {
    if (!cart) return false
    for (const item of cart.products) {
      if (item.selected) return true
    }
    return false
  }, [cart])

  return (
    <div className={style.wrapper}>
      <div className='w-full md:w-3/4'>
        <div className=''>
          <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
          <div className='grid grid-cols-1 gap-y-4'>
            {!cart && <CartItem.Skeleton count={5} height='120px' />}
          </div>
          <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
          </div>
        </div>
      </div>

      <div className='w-full md:w-1/4 md:pl-6 mt-6 md:mt-0'>
        <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
          <CartSummary {...summary} isLoaded={!!cart} />
          <div className='grid grid-cols-2 gap-x-3 mt-6'>
            <Tooltip label={hasSelectedPromo ? 'Barang promo tidak dapat dibuat quotation' : ''}>
              <Button
                colorScheme='yellow'
                w='full'
                isDisabled={hasSelectedPromo || !hasSelected}
                as={Link}
                href='/shop/quotation'
              >
                Quotation
              </Button>
            </Tooltip>
            <Tooltip label={hasSelected ? '' : 'Tidak ada item yang dipilih'}>
              <Button
                colorScheme='red'
                w='full'
                isDisabled={!hasSelected}
                as={Link}
                href='/shop/checkout'
              >
                Checkout
              </Button>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CartDetail