import React, { useState } from 'react';

function Variation(props: any) {
    const { variation, prod } = props;
    const getDefaultProduct = () => ({
        sku: '',
        name: '',
        color: '',
        size: '',
        price: 0,
        sellPrice: 0,
    });
    const [products, setProducts] = useState([getDefaultProduct()]);

    interface Product {
        sku: string;
        name: string;
        color: string;
        size: string;
        price: number;
        sellPrice: number;
    }

    const handleInputChange = (index: number, field: keyof Product, value: any) => {
        const updatedProducts = [...products];
        updatedProducts[index] = {
            ...updatedProducts[index],
            [field]: value,
        };
        setProducts(updatedProducts);
    };

    const handleAddRow = (event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();
        const newProduct = getDefaultProduct();
        setProducts([...products, newProduct]);
    };

    return (
        <div className="container mx-auto mb-3 overflow-x-auto py-1">
            <h1 className="text-md mb-4 font-semibold">Product List</h1>
            <table className="w-full table-auto  border">
                <thead>
                    <tr>
                        <th className="border px-2 py-2">SKU</th>
                        <th className="border px-2 py-2">Color</th>
                        <th className="border px-2 py-2">Size</th>
                        <th className="border px-2 py-2">Price</th>
                        <th className="border px-2 py-2">Sale Price</th>
                    </tr>
                </thead>
                <tbody>
                    {/* {variation.length > 0 ? (
                        <> */}
                    {variation.map((prod: any, index: number) => (
                        <tr key={index}>
                            <td className="border px-2 py-2">
                                <input type="text" autoComplete="off" placeholder="ABC-001" value={prod.product_id} onChange={(e) => handleInputChange(index, 'sku', e.target.value)} />
                            </td>
                            <td className="border px-2 py-2">
                                <input type="text" autoComplete="off" placeholder="Yellow" value={prod.nama_produk} onChange={(e) => handleInputChange(index, 'color', e.target.value)} />
                            </td>
                            <td className="border px-2 py-2">
                                <input type="number" autoComplete="off" value={prod.color} onChange={(e) => handleInputChange(index, 'size', e.target.value)} />
                            </td>

                            <td className="border px-2 py-2">
                                <input type="number" autoComplete="off" value={prod.size} onChange={(e) => handleInputChange(index, 'price', e.target.value)} />
                            </td>
                            <td className="border px-2 py-2">
                                <input type="number" autoComplete="off" value={prod.sellPrice} onChange={(e) => handleInputChange(index, 'sellPrice', e.target.value)} />
                            </td>
                        </tr>
                    ))}
                    {/* </> */}
                    {/* ) : (
                        <></>
                    )} */}
                </tbody>
            </table>
            <button className="btn btn-sm btn-outline-primary mt-3 rounded px-2 py-2 font-bold  hover:bg-blue-700" onClick={handleAddRow}>
                Add Variation
            </button>
        </div>
    );
}

export default Variation;