import React, { useState, useRef, useEffect } from "react";
import {
  CompareLayoutIcon,
  LayoutIcon,
  ResizerIcon,
} from "../../icons/SimulationIcons";
import { useSaveVersion } from "../../../store/builder/store";
import Search from "../inputs/Search";
import OuterClick from "../../../utils/outerClick";
import RegularDropDown from "../inputs/RegularDropDown";

interface Layout {
  id: number;
  name: string;
}
interface CompareLayoutProps {
  dummyLayouts: Layout[];
}

const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
  const [width, setWidth] = useState("50vw");
  const [isResizing, setIsResizing] = useState(false);
  const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
  const [selectedLayout, setSelectedLayout] = useState<string | null>(null); // Track selected layout
  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");
    };
  }, [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) => {
    setSelectedLayout(option); // Set selected layout
    console.log("Selected layout:", option);
  };

  return (
    <div
      className={`compareLayOut-wrapper ${width === "0px" ? "closed" : ""}`}
      ref={wrapperRef}
      style={{ width }}
    >
      <div className="chooseLayout-container">
        <div className="resizer" onMouseDown={handleStartResizing}>
          <ResizerIcon />
        </div>

        {width !== "0px" &&
          !selectedLayout && ( // 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">
                    {dummyLayouts.map((layout) => (
                      <button
                        key={layout.id}
                        className="layout-wrapper"
                        onClick={() => {
                          handleSelectLayout(layout.name);
                          setShowLayoutDropdown(false);
                        }}
                      >
                        <LayoutIcon />
                        <div className="layout">{layout.name}</div>
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

        {/* Always show after layout is selected */}
        {width !== "0px" && selectedLayout && (
          <div className="selectLayout-wrapper">
            <RegularDropDown
              header={selectedLayout}
              options={dummyLayouts.map((l) => l.name)} // Pass layout names as options
              onSelect={handleSelectLayout}
              search={false}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default CompareLayOut;