dmenu-admin/src/pages/orders/components/PaymentInfo.tsx

import type { FC } from 'react'
import type { Order } from '../types/Types'
import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
import { formatPrice, formatFaNumber } from '@/helpers/func'

interface PaymentInfoProps {
    order: Order
    getPaymentStatusColor: (status: string) => string
    getPaymentStatusTextColor: (status: string) => string
    getPaymentStatusText: (status: string) => string
}

const PaymentInfo: FC<PaymentInfoProps> = ({
    order,
    getPaymentStatusColor,
    getPaymentStatusTextColor,
    getPaymentStatusText
}) => {

    const paymentStatus = order.payments?.[0]?.status

    const getDeliveryMethodText = (method: string): string => {
        const methodMap: Record<string, string> = {
            [DeliveryMethodEnum.DineIn]: 'سرو در رستوران',
            [DeliveryMethodEnum.CustomerPickup]: 'دریافت از محل',
            [DeliveryMethodEnum.DeliveryCar]: 'تحویل به خودرو',
            [DeliveryMethodEnum.DeliveryCourier]: 'بیرون بر',
        }
        return methodMap[method] || method
    }

    const getPaymentMethodText = (method: string): string => {
        const methodMap: Record<string, string> = {
            [PaymentMethodEnum.Cash]: 'پرداخت نقدی',
            [PaymentMethodEnum.Online]: 'پرداخت آنلاین',
            [PaymentMethodEnum.CreditCard]: 'پرداخت کارتی',
            [PaymentMethodEnum.Wallet]: 'کیف پول',
        }
        return methodMap[method] || method
    }

    return (
        <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 ${getPaymentStatusColor(paymentStatus)}`}></div>
                    <div className={`text-[13px] ${getPaymentStatusTextColor(paymentStatus)}`}>
                        {getPaymentStatusText(paymentStatus)}
                    </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>{order.deliveryMethod ? getDeliveryMethodText(order.deliveryMethod.method) : '-'}</div>
                </div>

                {order.deliveryMethod?.description && (
                    <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>{order.deliveryMethod.description}</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>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : '-'}</div>
                </div>

                {order.paymentMethod?.description && (
                    <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>{order.paymentMethod.description}</div>
                    </div>
                )}

                {order.paymentMethod?.gateway && (
                    <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>{order.paymentMethod.gateway}</div>
                    </div>
                )}

                {order.paymentId && (
                    <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 className='font-mono text-xs'>{order.paymentId}</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>{formatPrice(order.subTotal)}</div>
                </div>

                {order.itemsDiscount > 0 && (
                    <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 className='text-green-600'>-{formatPrice(order.itemsDiscount)}</div>
                    </div>
                )}

                {order.couponDiscount > 0 && (
                    <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 className='text-green-600'>-{formatPrice(order.couponDiscount)}</div>
                    </div>
                )}

                {order.totalDiscount > 0 && (
                    <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 font-medium'>
                            جمع تخفیف‌ها
                        </div>
                        <div className='text-green-600 font-medium'>-{formatPrice(order.totalDiscount)}</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>{formatPrice(order.deliveryFee)}</div>
                </div>

                {order.tax > 0 && (
                    <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>{formatPrice(order.tax)}</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>{formatFaNumber(order.totalItems)}</div>
                </div>

                <div className='flex mt-4 text-[13px] font-bold justify-between items-center'>
                    <div>
                        مبلغ کل
                    </div>
                    <div>{formatPrice(order.total)}</div>
                </div>
            </div>
        </div>
    )
}

export default PaymentInfo