'use client'

import MinusIcon from '@/components/icons/MinusIcon'
import PlusIcon from '@/components/icons/PlusIcon'
import { useReceiptStore } from '@/zustand/receiptStore'
import { motion } from 'framer-motion'
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
import Image from 'next/image'
import React from 'react'

type Props = object

function FoodPage({ }: Props) {
    const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
    const increment = useReceiptStore(state => state.increment);
    const decrement = useReceiptStore(state => state.decrement);

    const price = 0; // TODO: Replace with actual price if needed

    return (
        <div className='w-full -translate-y-2 pt-6'>
            <div className="relative w-full rounded-2xl overflow-hidden">
                <Image
                    className='w-full'
                    src={'/assets/images/food-preview-hq.png'}
                    alt='Food image'
                    height={100}
                    width={100}
                    unoptimized
                    priority
                />
                <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
                    <div className="bg-white rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 font-bold">
                        خوراک
                    </div>
                    <button>
                        <ArrowLeft size={24} className='stroke-white' />
                    </button>
                </div>
            </div>

            <div className="relative px-6 pt-6 pb-7.5 bg-white w-full rounded-3xl overflow-hidden -translate-y-6">
                <div className="w-full inline-flex justify-between items-center">
                    <h5 className="text-base font-bold">
                        کباب چوبی مخصوص
                    </h5>
                    <button className='p-2 bg-[#EAECF0] rounded-lg'>
                        <Heart size={24} className='fill-black' />
                    </button>
                </div>

                <div className="mt-4 text-xs">
                    <div className='flex items-center gap-1'>
                        <Clock size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>زمان پخت و آماده سازی: 25 دقیقه</span>
                    </div>
                    <div className='flex items-center gap-2 mt-2'>
                        <Cup size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>1500 امتیاز برای هر بار خرید</span>
                    </div>
                    <div className='flex items-center gap-2 mt-2'>
                        <TruckTick size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>ارسال با پیک</span>
                    </div>
                </div>

                <div className="mt-4 text-xs">
                    <p>محتویات:</p>
                    <p>گوشت، سبزیجات، پیاز، ادویه جات معطر و ....</p>
                </div>

                <div className='mt-12 flex justify-between items-center'>
                    <span dir='ltr'>{price} T</span>
                    <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 />
                                <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-2"
                                >
                                    <PlusIcon />
                                </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-2"
                                >
                                    <MinusIcon />
                                </button>
                            </>
                        )}
                    </motion.div>
                </div>
            </div>
        </div>
    )
}

export default FoodPage
