import { useProductContext } from '../../../modules/simulation/products/productContext'
import RegularDropDown from '../../ui/inputs/RegularDropDown';
import { useProductStore } from '../../../store/simulation/useProductStore';
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 { usePauseButtonStore, usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { useEffect, useState } from 'react';

function ComparisonScene() {
    const { isPlaying, setIsPlaying } = usePlayButtonStore();
    const { products } = useProductStore();
    const { isVersionSaved } = useSaveVersion();
    const { activeModule } = useModuleStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
    const { mainProduct } = useMainProduct();
    const { setIsPaused } = usePauseButtonStore();
    const { loadingProgress } = useLoadingProgress();
    const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
    const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);

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

    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 && (
                <>
                    {comparisonProduct && !isPlaying &&
                        <div className="initial-selectLayout-wrapper">
                            <RegularDropDown
                                header={selectedProduct.productName}
                                options={products.map((l) => l.productName)} // Pass layout names as options
                                onSelect={handleSelectLayout}
                                search={false}
                            />
                        </div>
                    }
                    <CompareLayOut />

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

export default ComparisonScene;