interface ProductDetails {
    id: number;
    name: string;
    value: string;
}

interface ProductDetailsProps {
    details: ProductDetails[];
    setDetails: React.Dispatch<React.SetStateAction<ProductDetails[]>>;
}

const ProductDetails: React.FC<ProductDetailsProps> = ({ details, setDetails }) => {
    const addDetail = () => {
        let maxId = 0;
        maxId = details?.length ? details.reduce((max: number, character: any) => (character.id > max ? character.id : max), details[0].id) : 0;

        setDetails([
            ...details,
            {
                id: maxId + 1,
                name: '',
                value: '',
            },
        ]);
    };

    const removeDetail = (item: any = null) => {
        setDetails(details.filter((d: any) => d.id !== item.id));
    };

    const changeDetail = (type: string, value: string, id: number) => {
        const updatedDetail = details.map((detail) => {
            if (detail.id === id) {
                return {
                    ...detail,
                    [type === 'name' ? 'name' : 'value']: value,
                };
            }
            return detail;
        });

        setDetails(updatedDetail);
    };

    return (
        <div className="mb-4 mt-4 w-full ">
            <div className="mb-8 mt-2 table w-full">
                <table>
                    <thead>
                        <tr>
                            <th>Detail name</th>
                            <th>Value</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {details.length <= 0 && (
                            <tr>
                                <td colSpan={5} className="!text-center font-semibold">
                                    No Detail Available
                                </td>
                            </tr>
                        )}
                        {details.map((detail: any) => {
                            return (
                                <tr className="align-top" key={detail.id}>
                                    <td>
                                        <input
                                            type="text"
                                            className="form-input w-full"
                                            placeholder="( stamp / kadar, ...)"
                                            value={detail.name}
                                            onChange={(e) => changeDetail('name', e.target.value, detail.id)}
                                        />
                                    </td>
                                    <td>
                                        <input type="text" className="form-input w-full" placeholder="Value" value={detail.value} onChange={(e) => changeDetail('value', e.target.value, detail.id)} />
                                    </td>

                                    <td>
                                        <button type="button" onClick={() => removeDetail(detail)}>
                                            <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>
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
                <div className="m-4">
                    <button type="button" className="btn btn-outline-primary btn-sm" onClick={() => addDetail()}>
                        Add Detail
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ProductDetails;