import React, { Fragment, useEffect, useState } from 'react';
import { Tab } from '@headlessui/react';
import Select from 'react-select';
import ItemVariant from './VariationItem';
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 VariationFormProps {
    product: Product;
    setProduct: React.Dispatch<React.SetStateAction<Product>>;
}

const VariationForm: React.FC<VariationFormProps> = ({ product, setProduct }) => {
    const [attributes, setAttributes] = useState<any>([]);
    const [selectedOption, setSelectedOption] = useState<any>(null);
    const [produkDetail, setProductDetail] = useState<any>(product.product_details);
    // console.log(product);
    const [items, setItems] = useState<any>(product.product_items);
    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]);

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

    const getAttributes = async () => {
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/product-attributes`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include', // Include this option
            });
            const data = await response.json();

            const dataAttr = data.map((item: any) => {
                return {
                    id: item.id,
                    name: item.name,
                    value: item.values,
                    type: item.type,
                    label: item.name.charAt(0).toUpperCase() + item.name.slice(1),
                };
            });

            if (product.product_items.length > 0) {
                const productAttributes = [...new Set(product.product_items.flatMap((item: any) => (item.attributes ? item.attributes.map((attr: any) => attr.id) : [])))];

                const selectedOpt = dataAttr.filter((opt: any) => productAttributes.includes(opt.id));
                setSelectedOption(selectedOpt);
            }

            setAttributes(dataAttr);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    const handleVariation = (selectedOption: any) => {
        setSelectedOption(selectedOption);
    };

    useEffect(() => {
        getAttributes();
    }, []);
    const tabs = ['General', 'Variation', '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="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 uppercase"
                                    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_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>
                        </Tab.Panel>

                        <Tab.Panel>
                            <div className="custom-select">
                            <Select
                                isMulti
                                options={attributes}
                                placeholder="Select Attribute"
                                value={selectedOption}
                                id="product_attributes"
                                className="mb-4 ml-3 flex-1 lg:w-2/3 "
                                classNamePrefix="user-form-select"
                                name="product_attributes"
                                onChange={(selectedOption: any) => handleVariation(selectedOption)}
                            />
                            </div>
                            <div className="mb-4  ml-3 flex items-center  sm:flex-wrap">
                                <ItemVariant selectedOption={selectedOption} items={items} setItems={setItems} product={product} />
                            </div>
                            <div className="mb-4 ml-3 flex items-center justify-between sm:flex-wrap"></div>
                        </Tab.Panel>
                        <Tab.Panel>
                            <ProductDetails details={produkDetail} setDetails={setProductDetail} />
                        </Tab.Panel>
                    </Tab.Panels>
                </div>
            </Tab.Group>
        </>
    );
};

export default VariationForm;