'use client';

import Button from '@/components/button/PrimaryButton';
import CalendarIcon from '@/components/icons/CalendarIcon';
import LocationPinIcon from '@/components/icons/LocationPinIcon';
import PerformantTabRenderer from '@/components/tab/PerformantTabRenderer';
import TabContainer from '@/components/tab/TabContainer'
import { TabHeader } from '@/components/tab/TabHeader';
import { Receipt2, ReceiptItem } from 'iconsax-react';
import Image from 'next/image';
import React from 'react'
import { useTranslation } from 'react-i18next';

const currentOrders = [
    {
        id: 0,
        address: 'خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 1,
        address: '1...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 2,
        address: '2...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 3,
        address: '3...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 7,
        address: '2...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 4,
        address: '3...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 5,
        address: '2...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
    {
        id: 6,
        address: '3...',
        date: 'دوشنبه، 28 مرداد 1403',
        price: '560,000',
        items: [
            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
        ]
    },
]

function OrdersIndex() {

    const { t } = useTranslation('orders');

    const categories = [
        { id: 0, title: t('Tab.ActiveOrders'), icon: <ReceiptItem size={22} /> },
        { id: 1, title: t('Tab.PreviousOrders'), icon: <Receipt2 size={22} /> }
    ]

    const firstTab = () => {
        return currentOrders.map((order) => {
            return (
                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'>
                    <div className="text-sm2">
                        <div className='flex gap-2'>
                            <LocationPinIcon size={16} />
                            <p>{order.address}</p>
                        </div>
                        <div className='mt-2 flex gap-2'>
                            <CalendarIcon size={16} />
                            <p>{order.date}</p>
                        </div>
                    </div>

                    <hr className='mx-4 mt-6 text-disabled3 border-2' />

                    <div className='flex justify-between mt-6'>
                        <div className='flex justify-start gap-[9px]'>
                            {order.items.map((item) => {
                                return (
                                    <span key={item.id} className='w-8 h-8 relative'>
                                        <Image
                                            priority
                                            className='rounded-lg'
                                            src={item.image}
                                            width={32}
                                            height={32}
                                            alt="order image"
                                        />
                                        <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
                                            {item.quantity}
                                        </span>
                                    </span>
                                )
                            })}
                        </div>
                        <div className='font-medium text-sm' dir='ltr'>
                            {order.price} T
                        </div>
                    </div>

                    <Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
                </div>
            )
        })
    }


    return (
        <div className='pt-8'>
            <TabContainer>
                <TabHeader
                    viewRenderer={<PerformantTabRenderer rowHeight={320}>{firstTab()}</PerformantTabRenderer>}
                    title={categories[0].title} icon={categories[0].icon}>
                </TabHeader>
                <TabHeader
                    viewRenderer={<PerformantTabRenderer><div>empty</div><div></div></PerformantTabRenderer>}
                    title={categories[1].title} icon={categories[1].icon}>
                </TabHeader>
            </TabContainer>
        </div>
    )
}

export default OrdersIndex