'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { useTranslation } from 'react-i18next';
import { ArrowLeft, Trash } from 'iconsax-react';
import { useCart } from './hook/useCart';
import CartItemsList from './components/CartItemsList';
import CartSummary from './components/CartSummary';
import Prompt from '@/components/utils/Prompt';

const CartIndex = () => {
  const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
  const router = useRouter();
  const { clearCart } = useCart();
  const [showClearConfirm, setShowClearConfirm] = React.useState(false);

  const handleClearCart = (e: React.MouseEvent) => {
    e?.preventDefault();
    e?.stopPropagation();
    clearCart();
    setShowClearConfirm(false);
  };

  const toggleClearConfirm = (e: React.MouseEvent) => {
    e?.preventDefault();
    e?.stopPropagation();
    setShowClearConfirm(false);
  };

  return (
    <div className='bg-inherit flex flex-col h-full'>
      <div className='grid grid-cols-3 items-center py-4'>
        <Trash
          className='cursor-pointer place-self-start'
          size='24'
          color='currentColor'
          onClick={() => setShowClearConfirm(true)}
        />
        <h1 className='text-sm2 place-self-center font-medium'>{t('Heading')}</h1>
        <ArrowLeft
          className='cursor-pointer place-self-end'
          size='24'
          color='currentColor'
          onClick={() => router.back()}
        />
      </div>

      <div className='flex overflow-y-auto noscrollbar flex-col h-full pt-4 gap-4 pb-24' dir='rtl'>
        <CartItemsList />
        <CartSummary />
      </div>

      <div className={showClearConfirm ? 'fixed inset-0 z-1001' : 'pointer-events-none fixed inset-0 z-1001'}>
        <Prompt
          title='پاک کردن سبد خرید'
          description='آیا از پاک کردن تمامی آیتم‌های سبد خرید اطمینان دارید؟'
          textConfirm='بله'
          textCancel='خیر'
          onConfirm={handleClearCart}
          onCancel={toggleClearConfirm}
          visible={showClearConfirm}
          onClick={toggleClearConfirm}
        />
      </div>
    </div>
  );
};

export default CartIndex;