import { useProductContext } from '../../../modules/simulation/products/productContext'
import RegularDropDown from '../../ui/inputs/RegularDropDown';
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
import useModuleStore from '../../../store/useModuleStore';
import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { useEffect, useState } from 'react';
import { useVersionHistoryStore } from '../../../store/builder/useVersionHistoryStore';
import { useVersionContext } from '../../../modules/builder/version/versionContext';
import { useSceneContext } from '../../../modules/scene/sceneContext';

function ComparisonScene() {
    const { isPlaying } = usePlayButtonStore();
    const { productStore } = useSceneContext();
    const { products } = productStore();
    const { isVersionSaved } = useSaveVersion();
    const { activeModule } = useModuleStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
    const { mainProduct } = useMainProduct();
    const { loadingProgress } = useLoadingProgress();
    const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
    const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);
    const { versionHistory } = useVersionHistoryStore();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion, setSelectedVersion } = selectedVersionStore();

    const handleSelectVersion = (option: string) => {
        const version = versionHistory.find((version) => version.versionName === option);
        if (version) {
            setSelectedVersion(version);
        }
    };

    const handleSelectProduct = (option: string) => {
        const product = products.find((product) => product.productName === option);
        if (product) {
            setComparisonProduct(product.productUuid, product.productName);
        }
    };

    // useEffect(() => {
    //     if (versionHistory.length > 0) {
    //         setSelectedVersion(versionHistory[0])
    //     }
    // }, [versionHistory])

    // useEffect(() => {
    //     setCompareProductsData([
    //         {
    //             "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
    //             "productName": "Product 1",
    //             "simulationData": {
    //                 "roiPercentage": 273.9428571428571,
    //                 "paybackPeriod": 1.8251981643721318,
    //                 "netProfit": 9588000,
    //                 "productionCapacity": 4508.5,
    //                 "machineIdleTime": 1450,
    //                 "machineActiveTime": 430,
    //                 "throughputData": 180.34
    //             }
    //         },
    //         {
    //             "productUuid": "f614bf50-f61d-41c5-acc0-3783fb4da6b8",
    //             "productName": "Product 2",
    //             "simulationData": {
    //                 "roiPercentage": 281.7214285714286,
    //                 "paybackPeriod": 1.7748028701097842,
    //                 "netProfit": 9860250,
    //                 "productionCapacity": 4599.25,
    //                 "machineIdleTime": 1885,
    //                 "machineActiveTime": 646,
    //                 "throughputData": 183.97
    //             }
    //         }
    //     ])
    // }, []);


    useEffect(() => {
        if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
            // console.log('compareProductsData: ', compareProductsData);
            const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
            const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
            if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
                setShouldShowComparisonResult(true);
            } else {
                setShouldShowComparisonResult(false);
            }
        } else {
            setShouldShowComparisonResult(false);
        }
    }, [compareProductsData, mainProduct, comparisonProduct]);

    return (
        <>
            {isVersionSaved && activeModule === "simulation" && selectedProduct && (
                <>
                    {selectedVersion && !isPlaying &&
                        <div className="initial-selectLayout-wrapper">
                            <RegularDropDown
                                header={selectedVersion.versionName}
                                options={versionHistory.map((v) => v.versionName)} // Pass layout names as options
                                onSelect={handleSelectVersion}
                                search={false}
                            />
                            <br />
                            <RegularDropDown
                                header={selectedProduct.productName}
                                options={products.map((l) => l.productName)} // Pass layout names as options
                                onSelect={handleSelectProduct}
                                search={false}
                            />
                        </div>
                    }
                    <CompareLayOut />

                    {(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
                </>
            )}
        </>
    )
}

export default ComparisonScene;
