interface CustomMeta {
    id: number;
    key: string;
    value: string;
}

interface CustomMetaFormProps {
    customMeta: CustomMeta[];
    setCustomMeta: React.Dispatch<React.SetStateAction<CustomMeta[]>>;
}

const CustomMetaForm: React.FC<CustomMetaFormProps> = ({ customMeta, setCustomMeta }) => {
    const addCustomMeta = () => {
        let maxId = 0;
        maxId = customMeta?.length ? customMeta.reduce((max: number, character: any) => (character.id > max ? character.id : max), customMeta[0].id) : 0;

        setCustomMeta([
            ...customMeta,
            {
                id: maxId + 1,
                key: '',
                value: '',
            },
        ]);
    };
    const removeCustomMeta = (item: any = null) => {
        setCustomMeta(customMeta.filter((d: any) => d.id !== item.id));
    };

    const changeCustomMetaValue = (type: string, value: string, id: number) => {
        const updatedCustomMeta = customMeta.map((customMetaItem) => {
            if (customMetaItem.id === id) {
                const updatedCustomMeta = {
                    ...customMetaItem,
                    [type === 'key' ? 'key' : 'value']: value,
                };
                if (type === 'key' && value === '') {
                    updatedCustomMeta.value = ''; // Set value to '' if coupon_name is empty
                }
                return updatedCustomMeta;
            }
            return customMetaItem;
        });

        setCustomMeta(updatedCustomMeta);
    };

    return (
        <>
            {customMeta.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">
                            Custom Meta Item
                        </label>
                    </div>

                    {customMeta.map((meta: any, key: number) => (
                        <div className="ms-4 mt-2 " key={key}>
                            <div className=" flex items-center">
                                <div className="mr-4  w-1/4">
                                    <label htmlFor="">custom meta name</label>

                                    <input
                                        type="text"
                                        className={`form-input flex-1  ${customMeta.some((d) => d.id !== meta.id && d.key === meta.key) ? 'border-2 !border-rose-400' : ''}`}
                                        value={meta.key}
                                        onChange={(e) => changeCustomMetaValue('key', e.target.value, meta.id)}
                                    />
                                </div>
                                <div className="mr-4">
                                    <label htmlFor="">meta value</label>
                                    <input
                                        type="text"
                                        disabled={!meta.key}
                                        className="form-input flex-1"
                                        value={meta.value}
                                        onChange={(e) => changeCustomMetaValue('value', e.target.value, meta.id)}
                                    />
                                </div>

                                <div>
                                    <button className="mt-4" type="button" onClick={() => removeCustomMeta(meta)}>
                                        <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>
            )}
            <div className="m-4">
                <button type="button" className="btn btn-outline-danger btn-sm mt-4" onClick={() => addCustomMeta()}>
                    Add Custom Meta
                </button>
            </div>
        </>
    );
};
export default CustomMetaForm;