import Select from '@/components/Select'
import Table from '@/components/Table'
import { Location } from 'iconsax-react'
import { type FC } from 'react'
import type { ColumnType, RowDataType } from '@/components/types/TableTypes'
import AppImage from '@/assets/images/appimage.png'

interface OrderItem extends RowDataType {
    image: string
    title: string
    quantity: number
    amount: string
}

const OrderDetails: FC = () => {
    const orderItems: OrderItem[] = [
        {
            id: 1,
            image: AppImage,
            title: 'پیتزا پپرونی',
            quantity: 1,
            amount: '۴۲,۰۰۰ تومان'
        }
    ]

    const columns: ColumnType<OrderItem>[] = [
        {
            title: 'تصویر',
            key: 'image',
            render: (item) => (
                <div className=''>
                    <img
                        src={item.image}
                        alt={item.title}
                        className='w-12 h-12 rounded-lg'
                    />
                </div>
            )
        },
        {
            title: 'عنوان',
            key: 'title',
            align: 'right'
        },
        {
            title: 'تعداد',
            key: 'quantity',
            align: 'center'
        },
        {
            title: 'مبلغ',
            key: 'amount',
            align: 'right'
        }
    ]
    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'> سفارش ۱۲۳۴۵</h1>
                <div>
                    <Select
                        items={[]}
                        placeholder='درحال آماده سازی'
                        className='w-[200px] bg-[#FFEECC]'
                    />
                </div>
            </div>

            <div className='flex gap-7 mt-9'>
                <div className='flex-1'>
                    <div className='w-full bg-white rounded-4xl p-8'>
                        <div className='flex justify-between items-center'>
                            <div className='text-lg font-light'>
                                اطلاعات مشتری
                            </div>
                        </div>

                        <div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    شماره سفارش:
                                </div>
                                <div>۱۲۳۴۵</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    نام مشتری :
                                </div>
                                <div>مهرداد مظفری</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>نوع سفارش :</div>
                                <div>تحویل در  محل</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>زمان سفارش : </div>
                                <div>۱۴۰۳/۱۱/۲۵ - ۱۳:۰۰:۰۰</div>
                            </div>
                        </div>

                        <div className='mt-8 flex gap-20 text-[13px] font-light'>
                            <div className='flex gap-2'>
                                <div className='text-description'>شماره تماس:</div>
                                <div>۰۸۶۹۱۰۰۹۱۰۰۱</div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>آدرس::</div>
                                <div>اراک -خیابان شریعتی-خیابان جنت</div>
                                <div className='flex gap-1'>
                                    <Location size={17} color='#0047FF' />
                                    <div className='text-[13px] text-blue-600'>نقشه</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className='w-full bg-white rounded-4xl p-8 mt-8'>
                        <div className='text-lg font-light mb-6'>
                            جزییات سفارش
                        </div>

                        <Table
                            columns={columns}
                            data={orderItems}
                            showHeader={true}
                            className='mt-0'
                        />

                        <div className='flex justify-between items-center h-14 text-[13px] mt-5 border-t border-border'>
                            <div className=''>
                                ۱۰٪ ارزش افزوده
                            </div>
                            <div>
                                ۴۲۰,۰۰۰ تومان
                            </div>
                        </div>

                        <div className='flex font-bold justify-between items-center h-14 text-[13px] border-t border-border'>
                            <div>
                                جمع کل
                            </div>
                            <div>
                                ۴۲۰,۰۰۰ تومان
                            </div>
                        </div>
                    </div>
                </div>

                <div className='w-[330px] h-fit bg-white rounded-4xl p-8'>
                    <div className='flex justify-between items-center'>
                        <div className='font-light'>
                            اطلاعات پرداخت
                        </div>

                        <div className='flex gap-1.5 items-center'>
                            <div className='size-2 rounded-full bg-green-500'></div>
                            <div className='text-[13px] text-green-500'>
                                پرداخت شده
                            </div>
                        </div>
                    </div>

                    <div className='mt-10'>
                        <div className='flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                شماره تراکنش
                            </div>
                            <div>۱۲۳۴۵۶۷۸۹۰</div>
                        </div>
                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                شماره پیگیری
                            </div>
                            <div>42343546</div>
                        </div>

                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                نوع تراکنش
                            </div>
                            <div>پرداخت آنلاین</div>
                        </div>
                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                مبلغ سفارش
                            </div>
                            <div>۴۰۰۰۰۰۰ تومان</div>
                        </div>
                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                تخفیف
                            </div>
                            <div>۰ تومان</div>
                        </div>
                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                هزینه ارسال
                            </div>
                            <div>۲۰۰۰۰۰ تومان</div>
                        </div>
                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                مالیات
                            </div>
                            <div>۰ تومان</div>
                        </div>
                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
                            <div className=' text-description'>
                                مبلغ کل
                            </div>
                            <div>۴۲۰,۰۰۰ تومان</div>
                        </div>
                    </div>
                </div>
            </div>


        </div >
    )
}

export default OrderDetails