import React, { Fragment, useEffect, useState } from 'react';
import { Tab } from '@headlessui/react';
import ProductDetails from './ProductDetails';
import NumberFormatter from '@/lib/ribuan';

interface Product {
    product_sku: string;
    product_qty: number;
    product_gold_weight: number;
    product_reg_price: number;
    product_sale_price: number;
    product_categories: string;
    product_details: [];
    product_items: [];
}

interface SimpleFormProps {
    product: Product;
    setProduct: React.Dispatch<React.SetStateAction<Product>>;
}

const SimpleForm: React.FC<SimpleFormProps> = ({ product, setProduct }) => {
    const [produkDetail, setProductDetail] = useState<any>(product.product_details);

    const handleChange = (form: string, value: string) => {
        setProduct((prev) => ({
            ...prev,
            [form]: String(value),
        }));
    };
    const handleChangeNumber = (form: string, value: string) => {
        setProduct((prev) => ({
            ...prev,
            [form]: Number(value),
        }));
    };

    useEffect(() => {
        setProduct((product) => {
            return {
                ...product,
                product_details: produkDetail,
            };
        });
    }, [produkDetail]);

    const tabs = ['General', 'Detail'];

    return (
        <>
            <Tab.Group>
                <div className="mb-5 mr-5 sm:mb-0">
                    <Tab.List className="mt-3 flex flex-wrap">
                        {tabs.map((tabName, index) => (
                            <Tab as={Fragment} key={index}>
                                {({ selected }) => (
                                    <button
                                        className={`${
                                            selected ? 'text-secondary !outline-none before:!w-full' : ''
                                        } relative -mb-[1px] flex items-center p-5 py-3 before:absolute before:bottom-0 before:left-0 before:right-0 before:m-auto before:inline-block before:h-[1px] before:w-0 before:bg-secondary before:transition-all before:duration-700 hover:text-secondary hover:before:w-full`}
                                    >
                                        {tabName}
                                    </button>
                                )}
                            </Tab>
                        ))}
                    </Tab.List>
                </div>
                <div className="mt-4 w-full">
                    <Tab.Panels>
                        <Tab.Panel>
                            <div className="active">
                                <div className="mb-4  ml-3 flex items-center justify-between sm:flex-wrap">
                                    <label htmlFor="product_sku" className="mb-0 ltr:mr-2 rtl:ml-2">
                                        SKU
                                    </label>
                                    <input
                                        id="product_sku"
                                        type="text"
                                        name="product_sku"
                                        className="form-input ml-4 w-2/3"
                                        placeholder="SKU01"
                                        value={product.product_sku}
                                        onChange={(e) => handleChange('product_sku', e.target.value)}
                                    />
                                </div>
                                <div className="mb-4  ml-3 flex items-center justify-between sm:flex-wrap">
                                    <label htmlFor="product_qty" className="mb-0 ltr:mr-2 rtl:ml-2">
                                        Quantity
                                    </label>
                                    <input
                                        id="product_qty"
                                        type="number"
                                        name="product_qty"
                                        className="form-input ml-4 w-2/3"
                                        value={product.product_qty}
                                        onChange={(e) => handleChangeNumber('product_qty', e.target.value)}
                                    />
                                </div>
                                <div className="mb-4  ml-3 flex items-center justify-between sm:flex-wrap">
                                    <label htmlFor="product_gold_weight" className="mb-0 ltr:mr-2 rtl:ml-2">
                                        Gold Weight (gram)
                                    </label>
                                    <input
                                        id="product_gold_weight"
                                        type="number"
                                        name="product_gold_weight"
                                        className="form-input ml-4 w-2/3"
                                        value={product.product_gold_weight}
                                        onChange={(e) => handleChangeNumber('product_gold_weight', e.target.value)}
                                    />
                                </div>
                                <div className="mb-4 ml-3 flex items-center justify-between sm:flex-wrap">
                                    <label htmlFor="product_reg_price" className="mb-0 w-1/5 ltr:mr-2 rtl:ml-2">
                                        Harga Regular
                                    </label>
                                    <NumberFormatter
                                        name="product_reg_price"
                                        className="form-input ml-4 w-2/3"
                                        placeholder="1.000"
                                        value={product.product_reg_price}
                                        onChange={(value) => handleChangeNumber('product_reg_price', value.toString())}
                                    />
                                </div>
                                <div className="mb-4  ml-3 flex items-center justify-between sm:flex-wrap">
                                    <label htmlFor="product_sale_price" className="mb-0 w-1/5 ltr:mr-2 rtl:ml-2">
                                        Harga Diskon
                                    </label>
                                    <NumberFormatter
                                        name="product_sale_price"
                                        className="form-input ml-4 w-2/3"
                                        placeholder="1.000"
                                        value={product.product_sale_price}
                                        onChange={(value) => handleChangeNumber('product_sale_price', value.toString())}
                                    />
                                </div>
                            </div>
                        </Tab.Panel>
                        <Tab.Panel>
                            <ProductDetails details={produkDetail} setDetails={setProductDetail} />
                        </Tab.Panel>
                    </Tab.Panels>
                </div>
            </Tab.Group>
        </>
    );
};

export default SimpleForm;