'use client';

import Button from '@/components/button/PrimaryButton';
import { useReceiptStore } from '@/zustand/receiptStore';
import { motion } from 'framer-motion';
import { ArrowLeft, Trash } from 'iconsax-react';
import { PlusIcon, MinusIcon } from 'lucide-react';
import { useRouter } from 'next/navigation';
import React from 'react'
import { useTranslation } from 'react-i18next';

type Props = object

const CartIndex = ({ }: Props) => {
  const { t } = useTranslation('parallels', {
    keyPrefix: 'Cart'
  });
  const router = useRouter();
  const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
  const increment = useReceiptStore(state => state.increment);
  const decrement = useReceiptStore(state => state.decrement);


  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={() => { router.back() }}
        />
        <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' dir='rtl'>

        <ul className="pb-10 flex-1">
          <li className=''>
            <div className='grid grid-cols-2 justify-between'>
              <div className='text-sm'>کباب چوبی ژیوان (سیخ چوبی)</div>
              <div className='text-sm2 font-medium text-end'>69.000 T</div>
            </div>
            <div className='mt-6 flex justify-between items-center'>
              <motion.div
                whileTap={{ scale: 1.05 }}
                className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
              >
                {quantity <= 0 ? (
                  <button
                    onClick={() => increment(0)}
                    className="inline-flex w-full justify-center items-center gap-2"
                  >
                    <PlusIcon size={16} />
                    <span className="text-sm2 pt-0.5 font-medium">افزودن</span>
                  </button>
                ) : (
                  <>
                    <button
                      onClick={() => increment(0)}
                      className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-1"
                    >
                      <PlusIcon size={16} />
                    </button>
                    <motion.div
                      key={quantity}
                      initial={{ scale: 1 }}
                      animate={{ scale: [1.2, 0.95, 1] }}
                      transition={{ duration: 0.3 }}
                      className="text-sm2 pt-0.5 font-semibold"
                    >
                      {quantity}
                    </motion.div>
                    <button
                      onClick={() => decrement(0)}
                      className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-1"
                    >
                      {quantity > 1 ? <MinusIcon size={16} /> : <Trash className='stroke-foreground' size={16} />} {/* Use PlusIcon for decrement if quantity is 1 or less */}
                    </button>
                  </>
                )}
              </motion.div>
            </div>
            <hr className='my-4 border-1 border-border' />

          </li>
        </ul>

        <div>
          <div className='relative'>
            <h3 className='text-sm'>
              {t('InputDescription.Label')}
            </h3>
            <textarea
              className='w-full px-4 py-2.5 mt-4 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
              placeholder={t('InputDescription.Placeholder')}
              id='description'
              name='description'
            ></textarea>
            <span className='absolute top-4 right-2 px-2 bg-background text-foreground text-xs'>

            </span>
          </div>
        </div>

        <div className='grid grid-cols-2 pt-4'>
          <div className='grid grid-rows-2'>
            <div className='text-xs'>{t('SumOfItemsLabel')}</div>
            <div className="text-sm font-medium">{t('SumOfItemsValue').replace('{price}', '560.000')}</div>
          </div>
          <Button>
            {t('ButtonCheckout')}
          </Button>
        </div>
      </div>

    </div>
  )
}

export default CartIndex