import { type FC, useEffect, useState } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Button from '@/components/Button'
import Input from '@/components/Input'
import type { Order, UpdateOrderFeesType } from '../types/Types'

interface UpdateOrderFeesModalProps {
    isOpen: boolean
    onClose: () => void
    order: Order
    isLoading?: boolean
    onSubmit: (params: UpdateOrderFeesType) => void
}

const UpdateOrderFeesModal: FC<UpdateOrderFeesModalProps> = ({
    isOpen,
    onClose,
    order,
    isLoading,
    onSubmit,
}) => {
    const [deliveryFee, setDeliveryFee] = useState(String(order.deliveryFee ?? 0))
    const [packingFee, setPackingFee] = useState(String(order.packingFee ?? 0))
    const [prepareTime, setPrepareTime] = useState(
        order.prepareTime != null ? String(order.prepareTime) : ''
    )

    useEffect(() => {
        if (!isOpen) return
        setDeliveryFee(String(order.deliveryFee ?? 0))
        setPackingFee(String(order.packingFee ?? 0))
        setPrepareTime(order.prepareTime != null ? String(order.prepareTime) : '')
    }, [isOpen, order.deliveryFee, order.packingFee, order.prepareTime])

    const handleSubmit = () => {
        onSubmit({
            deliveryFee: Math.max(Number(deliveryFee) || 0, 0),
            packingFee: Math.max(Number(packingFee) || 0, 0),
            prepareTime: Math.max(Number(prepareTime) || 0, 0),
        })
    }

    return (
        <DefaulModal
            open={isOpen}
            close={onClose}
            isHeader
            title_header='ویرایش هزینه‌ها'
            width={420}
        >
            <div className='mt-6 space-y-4'>
                <Input
                    label='هزینه ارسال (تومان)'
                    type='number'
                    inputMode='numeric'
                    min={0}
                    seprator
                    value={deliveryFee}
                    onChange={(e) => setDeliveryFee(e.target.value)}
                />
                <Input
                    label='هزینه بسته‌بندی (تومان)'
                    type='number'
                    inputMode='numeric'
                    min={0}
                    seprator
                    value={packingFee}
                    onChange={(e) => setPackingFee(e.target.value)}
                />
                <Input
                    label='زمان آماده‌سازی (دقیقه)'
                    type='number'
                    inputMode='numeric'
                    min={0}
                    value={prepareTime}
                    onChange={(e) => setPrepareTime(e.target.value)}
                    placeholder='مثلاً ۳۰'
                />

                <div className='flex gap-4 justify-center pt-4'>
                    <Button
                        label='ذخیره'
                        onClick={handleSubmit}
                        isloading={isLoading}
                    />
                    <Button
                        label='انصراف'
                        className='bg-transparent text-black border border-primary'
                        onClick={onClose}
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default UpdateOrderFeesModal