import React, { useRef, useState } from "react";
import {
  AddIcon,
  ArrowIcon,
  RemoveIcon,
  ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../functions/handleResizePannel";

interface Path {
  pathName: string; // Represents the name of the path
  Children: string[]; // Represents the list of child points
}

interface DropListProps {
  val: Path; // Use the Path interface for the val prop
}

const DropList: React.FC<DropListProps> = ({ val }) => {
  const [openDrop, setOpenDrop] = useState(false);
  return (
    <div className="process-container">
      <div
        className="value"
        onClick={() => {
          setOpenDrop(!openDrop);
        }}
      >
        {val.pathName}
        <div className={`arrow-container${openDrop ? " active" : ""}`}>
          <ArrowIcon />
        </div>
      </div>
      {val.Children && openDrop && (
        <div className="children-drop">
          {val.Children.map((child, index) => (
            <div key={index} className="value">
              {child}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const Simulations: React.FC = () => {
  const productsContainerRef = useRef<HTMLDivElement>(null);
  const [productsList, setProductsList] = useState<string[]>([]);
  const [selectedItem, setSelectedItem] = useState<string>();

  const handleAddAction = () => {
    setProductsList([...productsList, `Product ${productsList.length + 1}`]);
  };

  const handleRemoveAction = (index: number) => {
    setProductsList(productsList.filter((_, i) => i !== index));
    if (selectedItem === productsList[index]) {
      setSelectedItem("");
    }
  };

  const Value = [
    { pathName: "Path 1", Children: ["Point 1", "Point 2"] },
    { pathName: "Path 2", Children: ["Point 1", "Point 2"] },
    { pathName: "Path 3", Children: ["Point 1", "Point 2"] },
  ];

  return (
    <div className="simulations-container">
      <div className="header">Simulations</div>
      <div className="add-product-container">
        <div className="actions">
          <div className="header">
            <div className="header-value">Products</div>
            <div className="add-button" onClick={handleAddAction}>
              <AddIcon /> Add
            </div>
          </div>
          <div
            className="lists-main-container"
            ref={productsContainerRef}
            style={{ height: "120px" }}
          >
            <div className="list-container">
              {productsList.map((action, index) => (
                <div
                  key={index}
                  className={`list-item ${
                    selectedItem === action ? "active" : ""
                  }`}
                >
                  <div
                    className="value"
                    onClick={() => setSelectedItem(action)}
                  >
                    <input type="radio" name="products" id="products" />
                    <RenameInput value={action} />
                  </div>
                  <div
                    className="remove-button"
                    onClick={() => handleRemoveAction(index)}
                  >
                    <RemoveIcon />
                  </div>
                </div>
              ))}
            </div>
            <div
              className="resize-icon"
              id="action-resize"
              onMouseDown={(e) => handleResize(e, productsContainerRef)}
            >
              <ResizeHeightIcon />
            </div>
          </div>
        </div>
        <div className="simulation-process">
          <div className="collapse-header-container">
            <div className="header">Operations</div>
            <div className="arrow-container">
              <ArrowIcon />
            </div>
          </div>
          {Value.map((val, index) => (
            <DropList key={index} val={val} />
          ))}
        </div>
        <div className="compare-simulations-container">
          <div className="compare-simulations-header">
            Need to Compare Layout?
          </div>
          <div className="content">
            Click <span>'Compare'</span> to review and analyze the layout
            differences between them.
          </div>
          <div className="input">
            <input type="button" value={"Compare"} className="submit" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Simulations;