import React, { useState } from "react";
import {
  AddIcon,
  InfoIcon,
  RemoveIcon,
  ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";

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

  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);
      setEditedName("");
    }
  };

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

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

  const handleSave = () => {
    if (!selectedItem) return;

    if (selectedItem.type === "action") {
      setActionList(
        actionList.map((action) =>
          action === selectedItem.name ? editedName : action
        )
      );
    } else if (selectedItem.type === "trigger") {
      setTriggerList(
        triggerList.map((trigger) =>
          trigger === selectedItem.name ? editedName : trigger
        )
      );
    }

    setSelectedItem({ ...selectedItem, name: editedName });
  };

  return (
    <div className="machine-mechanics-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">
          <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)}>
                  {action}
                </div>
                <div
                  className="remove-button"
                  onClick={() => handleRemoveAction(index)}
                >
                  <RemoveIcon />
                </div>
              </div>
            ))}
          </div>
          <div className="resize-icon">
            <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">
          <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)}>
                  {trigger}
                </div>
                <div
                  className="remove-button"
                  onClick={() => handleRemoveTrigger(index)}
                >
                  <RemoveIcon />
                </div>
              </div>
            ))}
          </div>
          <div className="resize-icon">
            <ResizeHeightIcon />
          </div>
        </div>
      </div>
      <div className="selected-properties-container">
        {selectedItem && (
          <>
            <div>
              <label>Edit Name:</label>
              <input
                type="text"
                value={editedName}
                onChange={(e) => setEditedName(e.target.value)}
              />
            </div>
            {/* Add other Properties Like:
             * Object Selection Dropdown
             * Buffer Time
             * Get Value From Object
             * Action
             * etc.
             */}
            <div onClick={handleSave}>Update</div> {/* remove this */}
          </>
        )}
      </div>
      <div className="footer">
        <InfoIcon />
        By Selecting Path, you can create Object Triggers.
      </div>
    </div>
  );
};

export default MachineMechanics;