import Tabs from '@/components/Tabs'
import { useState, type FC } from 'react'
import { TabMyOrdersEnum } from './enum/OrderEnum'
import Filters from '@/components/Filters'
import Button from '@/components/Button'
import { AddSquare } from 'iconsax-react'
import Table from '@/components/Table'
import { useGetMyOrders } from './hooks/useOrderData'

const MyOrders: FC = () => {

    const [activeTab, setActiveTab] = useState<TabMyOrdersEnum>(TabMyOrdersEnum.ALL)
    const { data } = useGetMyOrders()

    return (
        <div className='mt-5'>
            <h1>
                سفارشات من
            </h1>

            <div className='mt-10'>
                <Tabs
                    items={[
                        { label: 'همه', value: TabMyOrdersEnum.ALL },
                        { label: 'در حال انجام', value: TabMyOrdersEnum.IN_PROGRESS },
                        { label: 'تایید شده', value: TabMyOrdersEnum.CONFIRMED },
                        { label: 'تحویل داده شده', value: TabMyOrdersEnum.DELIVERED },
                        { label: 'کنسل شده', value: TabMyOrdersEnum.CANCELLED },
                    ]}
                    activeTab={activeTab}
                    onTabChange={(tab) => setActiveTab(tab as TabMyOrdersEnum)}
                />
            </div>

            <div className='mt-16 flex justify-between items-center'>
                <Filters
                    fields={[
                        { type: 'input', name: 'search', placeholder: 'جستجو' },
                        { type: 'date', name: 'date', placeholder: 'تاریخ' },
                        {
                            type: 'select', name: 'status', placeholder: 'وضعیت', options: [
                                { label: 'همه', value: 'all' },
                                { label: 'در حال انجام', value: 'in_progress' },
                                { label: 'تایید شده', value: 'confirmed' },
                                { label: 'تحویل داده شده', value: 'delivered' },
                                { label: 'کنسل شده', value: 'cancelled' },
                            ]
                        },
                    ]}
                    onChange={() => { }}
                />

                <Button
                    className='w-fit px-5'
                >
                    <div className='flex items-center gap-2'>
                        <AddSquare
                            size={16}
                            color='#000000'
                        />
                        <span>
                            سفارش جدید
                        </span>
                    </div>
                </Button>
            </div>

            <div className='mt-10'>
                <Table
                    columns={[
                        {
                            key: 'id',
                            title: 'شماره',
                        },
                        {
                            key: 'title',
                            title: 'عنوان',
                        },
                        {
                            key: 'createdAt',
                            title: 'زمان ثبت سفارش',
                        },
                        {
                            key: 'designer',
                            title: 'طراح',
                        },
                        {
                            key: 'type',
                            title: 'نوع سفارش',
                        },
                        {
                            key: 'itemsCount',
                            title: 'تعداد اقلام',
                        },
                        {
                            key: 'status',
                            title: 'وضعیت سفارش',
                        },
                        {
                            key: 'actions',
                            title: '',
                        }
                    ]}
                    data={[
                        {
                            id: 1,
                            title: 'سفارش 1',
                            createdAt: '2021-01-01',
                            designer: 'طراح 1',
                            type: 'نوع 1',
                            itemsCount: 10,
                            status: 'در حال انجام',
                        },
                    ]}
                />
            </div>
        </div>
    )
}

export default MyOrders