import Tabs from '@/components/Tabs'
import { useState, type FC } from 'react'
import { TabMyRequestsEnum } from './enum/RequestEnum'
import Filters from '@/components/Filters'
import Button from '@/components/Button'
import { AddSquare, Eye } from 'iconsax-react'
import Table from '@/components/Table'
import { useGetMyRequests } from './hooks/useRequestData'
import moment from 'moment-jalaali'
import { Link } from 'react-router-dom'
import { Paths } from '@/config/Paths'

const MyRequests: FC = () => {
    const [page, setPage] = useState<number>(1)
    const [activeTab, setActiveTab] = useState<TabMyRequestsEnum>(TabMyRequestsEnum.ALL)
    const { data } = useGetMyRequests(page, activeTab)

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

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

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

            <div className='mt-10'>
                <Table
                    columns={[
                        {
                            key: 'orderNumber',
                            title: 'شماره',
                        },
                        {
                            key: 'items',
                            title: 'تعداد اقلام',
                            render: (item) => {
                                return (
                                    <div>{item.items.length}</div>
                                )
                            }
                        },
                        {
                            key: 'createdAt',
                            title: 'زمان ثبت سفارش',
                            render: (item) => {
                                return (
                                    <div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
                                )
                            }
                        },
                        {
                            key: 'designer',
                            title: 'طراح',
                        },
                        {
                            key: 'status',
                            title: 'وضعیت سفارش',
                        },
                        {
                            key: 'actions',
                            title: '',
                            render: (item) => {
                                return (
                                    <Link to={Paths.requestDetails + item.id}>
                                        <Eye
                                            size={20}
                                            color='#000000'
                                        />
                                    </Link>
                                )
                            }
                        }
                    ]}
                    data={data?.data}
                    pagination={{
                        currentPage: page,
                        onPageChange: setPage,
                        totalPages: data?.meta?.totalPages || 1
                    }}
                />
            </div>
        </div>
    )
}

export default MyRequests