import style from './cart.module.css'

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

import { getAuth } from '~/libs/auth'
import { useCartStore } from '~/modules/cart/stores/useCartStore'

import CartItem from '~/modules/cart/components/Item'
import CartSummary from '~/modules/cart/components/Summary'
import clsxm from '~/libs/clsxm'

const CartPage = () => {
  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])

  const hasSelectNoPrice = useMemo(() => {
    if (!cart) return false
    for (const item of cart.products) {
      if (item.selected && item.price.price_discount == 0) return true
    }
    return false
  }, [cart])

  return (
    <>
      <div className={style['title']}>
        Keranjang Belanja
      </div>

      <div className='h-6' />

      <div className={style['content']}>
        <div className={style['item-wrapper']}>
          <div className={style['item-skeleton']}>
            {!cart && <CartItem.Skeleton count={5} height='120px' />}
          </div>

          <div className={style['items']}>
            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
          </div>
        </div>

        <div className={style['summary-wrapper']}>
          <div className={style['summary']}>
            <CartSummary {...summary} isLoaded={!!cart} />

            <div className={style['summary-buttons']}>
              <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={clsxm({
                'Tidak ada item yang dipilih': !hasSelected,
                'Terdapat item yang tidak ada harga': hasSelectNoPrice
              })}>
                <Button
                  colorScheme='red'
                  w='full'
                  isDisabled={!hasSelected || hasSelectNoPrice}
                  as={Link}
                  href='/shop/checkout'
                >
                  Checkout
                </Button>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default CartPage