interface Discount {
    id: number;
    coupon_name: string;
    amount: number;
    free_item: string;
}

interface DiscountFormProps {
    discounts: Discount[];
    setDiscounts: React.Dispatch<React.SetStateAction<Discount[]>>;
    order_status: string;
}

const DiscountForm: React.FC<DiscountFormProps> = ({ discounts, setDiscounts, order_status }) => {
    // discount state

    const changeDiscountValue = (type: string, value: string, id: number) => {
        const updatedDiscounts = discounts.map((discount) => {
            if (discount.id === id) {
                const updatedDiscount = {
                    ...discount,
                    [type === 'coupon_name' ? 'coupon_name' : 'amount']: type === 'coupon_name' ? value.toUpperCase() : Number(value),
                    [type === 'free_item' ? 'free_item' : 'amount']: type === 'free_item' ? value : Number(value),
                };

                if (type === 'coupon_name' && value === '') {
                    updatedDiscount.amount = 0; // Set amount to 0 if coupon_name is empty
                }

                return updatedDiscount;
            }
            return discount;
        });

        setDiscounts(updatedDiscounts);
    };

    const addDiscounts = () => {
        let maxId = 0;
        maxId = discounts?.length ? discounts.reduce((max: number, character: any) => (character.id > max ? character.id : max), discounts[0].id) : 0;

        setDiscounts([
            ...discounts,
            {
                id: maxId + 1,
                coupon_name: '',
                amount: 0,
                free_item: '',
            },
        ]);
    };

    const removeDiscounts = (disc: any = null) => {
        setDiscounts(discounts.filter((d: any) => d.id !== disc.id));
    };
    return (
        <>
            {discounts.length > 0 && (
                <div className="m-2 rounded-md border border-white-light py-4 dark:border-[#1b2e4b]">
                    <div className=" ms-4">
                        <label htmlFor="shipping_method" className="mb-0 font-bold uppercase ltr:mr-2 rtl:ml-2">
                            Discount
                        </label>
                    </div>

                    {discounts.map((disc: any) => (
                        <div className="ms-4 mt-2" key={disc.id}>
                            <div className="mt-4 flex items-center">
                                <div className="mr-4">
                                    <label htmlFor="">coupon name</label>
                                    <input
                                        type="text"
                                        className={`form-input flex-1 uppercase ${discounts.some((d) => d.id !== disc.id && d.coupon_name === disc.coupon_name) ? 'border-2 !border-rose-400' : ''}`}
                                        value={disc.coupon_name}
                                        disabled={order_status !== 'Processing'}
                                        onChange={(e) => changeDiscountValue('coupon_name', e.target.value, disc.id)}
                                    />
                                </div>
                                {disc.free_item !== '' && disc.free_item !== undefined ? (
                                    <div className="mr-4">
                                        <label htmlFor="">free item</label>
                                        <input
                                            type="text"
                                            className="form-input flex-1"
                                            disabled={!disc.coupon_name || order_status !== 'Processing'}
                                            value={disc.free_item}
                                            onChange={(e) => changeDiscountValue('free_item', e.target.value, disc.id)}
                                        />
                                    </div>
                                ) : (
                                    <div className="mr-4">
                                        <label htmlFor="">coupon amount</label>
                                        <input
                                            type="number"
                                            className="form-input flex-1"
                                            disabled={!disc.coupon_name || order_status !== 'Processing'}
                                            value={disc.amount}
                                            onChange={(e) => changeDiscountValue('amount', e.target.value, disc.id)}
                                        />
                                    </div>
                                )}

                                <div>
                                    {order_status === 'Processing' && (
                                        <button className="mt-4" type="button" onClick={() => removeDiscounts(disc)}>
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="20"
                                                height="20"
                                                viewBox="0 0 24 24"
                                                fill="none"
                                                stroke="currentColor"
                                                strokeWidth="1.5"
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                            >
                                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                                <line x1="6" y1="6" x2="18" y2="18"></line>
                                            </svg>
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
            {order_status === 'Processing' && (
                <div className="m-4">
                    <button type="button" className="btn btn-outline-success btn-sm mt-4" onClick={() => addDiscounts()}>
                        Add Discount
                    </button>
                </div>
            )}
        </>
    );
};
export default DiscountForm;