import React, { useRef, useState } from "react";
import {
  AddIcon,
  InfoIcon,
  RemoveIcon,
  ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
import { handleResize } from "../../../../functions/handleResizePannel";
import EyeDropInput from "../../../ui/inputs/EyeDropInput";
import { useSelectedActionSphere } from "../../../../store/store";

const MachineMechanics: React.FC = () => {
  const { selectedActionSphere } = useSelectedActionSphere();
  console.log("selectedActionSphere: ", selectedActionSphere);
  const [actionList, setActionList] = useState<string[]>([]);
  const [triggerList, setTriggerList] = useState<string[]>([]);
  const [selectedItem, setSelectedItem] = useState<{
    type: "action" | "trigger";
    name: string;
  } | null>(null);

  const actionsContainerRef = useRef<HTMLDivElement>(null);
  const triggersContainerRef = useRef<HTMLDivElement>(null);

  const handleAddAction = () => {
    setActionList([...actionList, `Action ${actionList.length + 1}`]);
  };

  const handleAddTrigger = () => {
    setTriggerList([...triggerList, `Trigger ${triggerList.length + 1}`]);
  };

  const handleRemoveAction = (index: number) => {
    setActionList(actionList.filter((_, i) => i !== index));
    if (
      selectedItem?.type === "action" &&
      selectedItem.name === actionList[index]
    ) {
      setSelectedItem(null);
    }
  };

  const handleRemoveTrigger = (index: number) => {
    setTriggerList(triggerList.filter((_, i) => i !== index));
    if (
      selectedItem?.type === "trigger" &&
      selectedItem.name === triggerList[index]
    ) {
      setSelectedItem(null);
    }
  };

  const handleSelectItem = (type: "action" | "trigger", name: string) => {
    setSelectedItem({ type, name });
  };

  const [processes, setProcesses] = useState<string[]>([]);
  const [activeProcess, setActiveProcesses] = useState<string>();

  const handleSelect = (option: string) => {
    setActiveProcesses(option); // Update the active option state
  };
  const handleAddProcess = () => {
    const newProcess = `Process ${processes.length + 1}`; // Generate new process name dynamically
    setProcesses((prevProcesses) => [...prevProcesses, newProcess]); // Update the state with the new process
  };

  return (
    <div className="machine-mechanics-container">
      <div className="machine-mechanics-header">
        {selectedActionSphere?.path?.modelName || "path name not found"}
      </div>
      {/* <div className="process-list-container">
        <div className="label">Process:</div>
        <RegularDropDown
          header={activeProcess || "add process ->"}
          options={processes}
          onSelect={handleSelect}
        />
        <div className="add-new-process" onClick={handleAddProcess}>
          <AddIcon />
        </div>
      </div> */}
      <div className="machine-mechanics-content-container">
        <div className="actions">
          <div className="header">
            <div className="header-value">Actions</div>
            <div className="add-button" onClick={handleAddAction}>
              <AddIcon /> Add
            </div>
          </div>
          <div
            className="lists-main-container"
            ref={actionsContainerRef}
            style={{ height: "120px" }}
          >
            <div className="list-container">
              {actionList.map((action, index) => (
                <div
                  key={index}
                  className={`list-item ${
                    selectedItem?.type === "action" &&
                    selectedItem.name === action
                      ? "active"
                      : ""
                  }`}
                >
                  <div
                    className="value"
                    onClick={() => handleSelectItem("action", action)}
                  >
                    <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, actionsContainerRef)}
            >
              <ResizeHeightIcon />
            </div>
          </div>
        </div>
        <div className="triggers">
          <div className="header">
            <div className="header-value">Triggers</div>
            <div className="add-button" onClick={handleAddTrigger}>
              <AddIcon /> Add
            </div>
          </div>
          <div
            className="lists-main-container"
            ref={triggersContainerRef}
            style={{ height: "120px" }}
          >
            <div className="list-container">
              {triggerList.map((trigger, index) => (
                <div
                  key={index}
                  className={`list-item ${
                    selectedItem?.type === "trigger" &&
                    selectedItem.name === trigger
                      ? "active"
                      : ""
                  }`}
                >
                  <div
                    className="value"
                    onClick={() => handleSelectItem("trigger", trigger)}
                  >
                    <RenameInput value={trigger} />
                  </div>
                  <div
                    className="remove-button"
                    onClick={() => handleRemoveTrigger(index)}
                  >
                    <RemoveIcon />
                  </div>
                </div>
              ))}
            </div>
            <div
              className="resize-icon"
              id="trigger-resize"
              onMouseDown={(e) => handleResize(e, triggersContainerRef)}
            >
              <ResizeHeightIcon />
            </div>
          </div>
        </div>
        <div className="selected-properties-container">
          {selectedItem && (
            <>
              <div className="properties-header">{selectedItem.name}</div>
              <LabledDropdown
                defaultOption="On-hit"
                options={["On-hit", "Buffer"]}
              />
              <InputWithDropDown
                label="Speed"
                value=""
                activeOption=".mm"
                onChange={() => {}}
              />
              <EyeDropInput />
            </>
          )}
        </div>
        <div className="footer">
          <InfoIcon />
          By Selecting Path, you can create Object Triggers.
        </div>
      </div>
    </div>
  );
};

export default MachineMechanics;