Dwinzo_dev/app/src/components/ui/compareVersion/CompareLayOut.tsx

import React, { useState, useRef, useEffect, Suspense } from "react";
import {
  CompareLayoutIcon,
  LayoutIcon,
  ResizerIcon,
} from "../../icons/SimulationIcons";
import {
  useLoadingProgress,
  useSaveVersion,
} from "../../../store/builder/store";
import Search from "../inputs/Search";
import OuterClick from "../../../utils/outerClick";
import { useProductStore } from "../../../store/simulation/useProductStore";
import Scene from "../../../modules/scene/scene";
import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";

const CompareLayOut = () => {
  const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
  console.log("comparisonProduct: ", comparisonProduct);
  const { products } = useProductStore();
  const { setLoadingProgress } = useLoadingProgress();
  const [width, setWidth] = useState("50vw");
  const [isResizing, setIsResizing] = useState(false);
  const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
  const wrapperRef = useRef<HTMLDivElement>(null);
  const startWidthRef = useRef<number>(0);
  const startXRef = useRef<number>(0);
  const { setIsVersionSaved } = useSaveVersion();

  OuterClick({
    contextClassName: ["displayLayouts-container", "selectLayout"],
    setMenuVisible: () => setShowLayoutDropdown(false),
  });

  const handleStartResizing = (e: React.MouseEvent) => {
    e.preventDefault();
    setIsResizing(true);
    startXRef.current = e.clientX;
    if (wrapperRef.current) {
      startWidthRef.current = wrapperRef.current.getBoundingClientRect().width;
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!isResizing || !wrapperRef.current) return;

    const dx = startXRef.current - e.clientX;
    const newWidthPx = startWidthRef.current + dx;
    const viewportWidth = window.innerWidth;
    const newWidthVw = (newWidthPx / viewportWidth) * 100;

    if (newWidthVw <= 10) {
      setWidth("0px");
    } else if (newWidthVw <= 90) {
      setWidth(`${newWidthPx}px`);
    }
  };

  const handleMouseUp = () => {
    if (!isResizing) return;

    if (wrapperRef.current) {
      const finalWidthPx = wrapperRef.current.getBoundingClientRect().width;
      const viewportWidth = window.innerWidth;
      const finalWidthVw = (finalWidthPx / viewportWidth) * 100;

      if (finalWidthVw <= 10) {
        setWidth("0px");
        setIsVersionSaved(false);
      } else {
        setWidth(`${finalWidthVw}vw`);
      }
    }

    setIsResizing(false);
  };

  useEffect(() => {
    if (isResizing) {
      window.addEventListener("mousemove", handleMouseMove);
      window.addEventListener("mouseup", handleMouseUp);
      document.body.classList.add("resizing-active");
    }

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
      document.body.classList.remove("resizing-active");
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isResizing]);

  // Maintain proportional width on window resize
  useEffect(() => {
    const handleResize = () => {
      if (!wrapperRef.current || isResizing) return;

      const currentWidth = wrapperRef.current.style.width;
      if (currentWidth === "0px" || currentWidth.endsWith("vw")) return;

      const pxWidth = parseFloat(currentWidth);
      const vwWidth = (pxWidth / window.innerWidth) * 100;
      setWidth(`${vwWidth}vw`);
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [isResizing]);

  const handleSelectLayout = (option: string) => {
    const product = products.find((product) => product.productName === option);
    if (product) {
      setComparisonProduct(product.productId, product.productName);
      setLoadingProgress(1);
    }
  };

  return (
    <div
      className={`compareLayOut-wrapper ${width === "0px" ? "closed" : ""}`}
      ref={wrapperRef}
      style={{ width }}
    >
      <button
        title="resize-canvas"
        id="compare-resize-slider-btn"
        className="resizer"
        onMouseDown={handleStartResizing}
      >
        <ResizerIcon />
      </button>
      <div className="chooseLayout-container">
        {comparisonProduct && (
          <div className="compare-layout-canvas-container">
            <Suspense fallback={null}>
              <Scene layout="Comparison Layout" />
            </Suspense>
          </div>
        )}

        {width !== "0px" &&
          !comparisonProduct && ( // Show only if no layout selected
            <div className="chooseLayout-wrapper">
              <div className="icon">
                <CompareLayoutIcon />
              </div>
              <div className="value">Choose Layout to compare</div>
              <button
                className="selectLayout"
                onClick={() => setShowLayoutDropdown(!showLayoutDropdown)}
              >
                Select Layout
              </button>

              {showLayoutDropdown && (
                <div className="displayLayouts-container">
                  <div className="header">Layouts</div>
                  <Search onChange={() => {}} />
                  <div className="layouts-container">
                    {products.map((layout) => (
                      <button
                        key={layout.productId}
                        className="layout-wrapper"
                        onClick={() => {
                          handleSelectLayout(layout.productName);
                          setShowLayoutDropdown(false);
                        }}
                      >
                        <LayoutIcon />
                        <div className="layout">{layout.productName}</div>
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

        {/* Always show after layout is selected */}
      </div>
    </div>
  );
};

export default CompareLayOut;