75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
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;
|