import React, { useEffect, useState, useCallback } from 'react';
import Select from 'react-select';
import SimpleForm from '../Form/SimpleForm';
import VariationForm from '../Form/VariationForm';

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 DetailProductProps {
    product: Product;
    setProduct: React.Dispatch<React.SetStateAction<Product>>;
}

const ProductForm: React.FC<DetailProductProps> = ({ product, setProduct }) => {
    const productTypeOptions = [
        { value: 'simple', label: 'Simple Product' },
        { value: 'variation', label: 'Variation Product' },
    ];

    const [selectedProductType, setSelectedProductType] = useState<any>();

    useEffect(() => {
        if (product.product_items && product.product_items.length > 0) {
            setSelectedProductType(productTypeOptions[1]);
            return;
        } else {
            setSelectedProductType(productTypeOptions[0]);
            return;
        }
    }, []);

    const handleProductTypeChange = (e: any) => {
        setProduct((product) => {
            return {
                ...product,
                product_items: [],
            };
        });

        if (e.value === 'variation') {
            setProduct((product) => {
                return {
                    ...product,
                    product_qty: 0,
                    product_gold_weight: 0,
                };
            });
        }
        setSelectedProductType(e);
    };

    return (
        <>
            <div className="custom-select mb-5 w-1/2 lg:w-1/4">
                <Select options={productTypeOptions} id="product_type" className="dark:flex-1" name="product_type" value={selectedProductType} onChange={handleProductTypeChange} />
            </div>

            {/* SIMPLE PRODUCT */}

            {selectedProductType && selectedProductType.value === 'simple' && (
                <>
                    <SimpleForm product={product} setProduct={setProduct} />
                </>
            )}

            {/* VARIATION PRODUCT */}

            {selectedProductType && selectedProductType.value === 'variation' && (
                <>
                    <VariationForm product={product} setProduct={setProduct} />
                </>
            )}
        </>
    );
};

export default ProductForm;