import Filters from '@/components/Filters'
import { type FC } from 'react'
import Table from '@/components/Table'
import { AddSquare, Edit2, Eye, Printer, Receipt21 } from 'iconsax-react'
import { useGetOrders } from './hooks/useOrderData'
import moment from 'moment-jalaali'
import { Link } from 'react-router-dom'
import { Paths } from '@/config/Paths'
import type { OrderListItemType } from './types/Types'
import Button from '@/components/Button'

const OrdersList: FC = () => {

    const { data } = useGetOrders()

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>سفارش ها</h1>
                <Link to={Paths.convertToOrder}>
                    <Button className='w-fit px-6'>
                        <div className='flex gap-2 items-center'>
                            <AddSquare size={18} color='black' />
                            سفارش جدید
                        </div>
                    </Button>
                </Link>
            </div>

            <div className='mt-8'>
                <Filters
                    fields={[
                        {
                            name: 'search',
                            type: 'input',
                            placeholder: 'جستجو',
                        },
                        {
                            name: 'status',
                            type: 'select',
                            placeholder: 'وضعیت',
                            options: [
                                { label: 'درحال انتظار', value: 'pending' },
                            ],
                        },
                        {
                            name: 'date',
                            type: 'date',
                            placeholder: 'تاریخ',
                        },
                    ]}
                    onChange={() => { }} />
            </div>

            <div className='mt-8'>
                <Table<OrderListItemType>
                    columns={[
                        {
                            key: 'orderNumber',
                            title: 'شماره',
                        },
                        {
                            key: 'customer',
                            title: 'مشتری',
                            render: (item) => {
                                return (
                                    <div>
                                        {item.user?.firstName ? item.user?.firstName + ' ' + item.user?.lastName : item.user?.phone}
                                    </div>
                                )
                            }
                        },
                        {
                            key: 'product',
                            title: 'نام محصول',
                            render: (item) => (
                                <div>{item.product?.title ?? '—'}</div>
                            ),
                        },
                        {
                            key: 'createdAt',
                            title: 'تاریخ ایجاد ',
                            render: (item) => {
                                return (
                                    <div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
                                )
                            }
                        },
                        {
                            key: 'type',
                            title: 'تعداد اقلام',
                            render: () => <div>۱</div>,
                        },
                        {
                            key: 'designer',
                            title: 'مجری / طراح',
                        },
                        {
                            key: 'status',
                            title: 'وضعیت',
                            render: (item) => {
                                return (
                                    <div className='h-6 w-fit flex items-center bg-[#FFEDCA] text-[#FF7B00]  rounded-full px-2.5 text-xs'>
                                        {item.status}
                                    </div>
                                )
                            }
                        },
                        {
                            key: 'actions',
                            title: '',
                            render: (item) => {
                                return (
                                    <div className='flex gap-2 items-center'>
                                        <Link title='فرم چاپ' to={Paths.orderPrint + item.id}>
                                            <Printer
                                                size={20}
                                                color='black'
                                            />
                                        </Link>
                                        <Link
                                            to={Paths.order.details + item.id}
                                        >
                                            <Eye size={20} color='#8C90A3' />
                                        </Link>
                                        <Link to={Paths.order.edit + item.id}>
                                            <Edit2 size={20} color='#0037FF' />
                                        </Link>
                                        <Receipt21 size={20} color='#FF8000' />
                                    </div>
                                )
                            }
                        },
                    ]}
                    data={data?.data}
                />
            </div>
        </div>
    )
}

export default OrdersList