import { useProductContext } from '../../../modules/simulation/products/productContext'
import RegularDropDown from '../../ui/inputs/RegularDropDown';
import { useProductStore } from '../../../store/simulation/useProductStore';
import { useSaveVersion } from '../../../store/builder/store';
import useModuleStore from '../../../store/useModuleStore';
import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
import { useComparisonProduct } from '../../../store/simulation/useSimulationStore';
import { usePauseButtonStore, usePlayButtonStore } from '../../../store/usePlayButtonStore';

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 { setIsPaused } = usePauseButtonStore();

    const handleSelectLayout = (option: string) => {
        const product = products.find((product) => product.productName === option);
        if (product) {
            setComparisonProduct(product.productUuid, product.productName);
            setIsPaused(true);
        }
    };
    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 />
                    {false && <ComparisonResult />}
                </>
            )}
        </>
    )
}

export default ComparisonScene;