import React, { useState } from "react";
import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";

const Trigger: React.FC = () => {
  // State to hold the list of triggers
  const [triggers, setTriggers] = useState<string[]>([]);
  const [activeOption, setActiveOption] = useState("onComplete");

  // States for dropdowns
  const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
  const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
  const [triggeredAction, setTriggeredAction] = useState<string[]>([]);

  // Function to handle adding a new trigger
  const addTrigger = (): void => {
    const newTrigger = `Trigger ${triggers.length + 1}`;
    setTriggers([...triggers, newTrigger]); // Add new trigger to the state

    // Initialize the states for the new trigger
    setTriggeredModel([...triggeredModel, ""]);
    setTriggeredPoint([...triggeredPoint, ""]);
    setTriggeredAction([...triggeredAction, ""]);
  };

  // Function to handle removing a trigger
  const removeTrigger = (index: number): void => {
    setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
    setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
    setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
    setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
  };

  return (
    <div className="trigger-wrapper">
      <div className="header">
        <div className="title">Trigger</div>
        <div
          className="add-button"
          onClick={addTrigger}
          style={{ cursor: "pointer" }}
        >
          <AddIcon /> Add
        </div>
      </div>
      <div className="trigger-list">
        {/* Map over triggers and render them */}
        {triggers.map((trigger, index) => (
          <div key={index} className="trigger-item">
            <div className="trigger-name">
              {trigger}
              <div
                className="remove-button"
                onClick={() => removeTrigger(index)}
                style={{ cursor: "pointer" }}
              >
                <RemoveIcon />
              </div>
            </div>
            <LabledDropdown
              defaultOption={activeOption}
              options={["onComplete", "onStart", "onStop", "delay"]}
              onSelect={(option) => setActiveOption(option)}
            />
            <div className="trigger-options">
              <div>
                <LabledDropdown
                  defaultOption={triggeredModel[index] || "Select Model"}
                  options={["Model 1", "Model 2", "Model 3"]}
                  onSelect={(option) => {
                    const newModel = [...triggeredModel];
                    newModel[index] = option;
                    setTriggeredModel(newModel);
                  }}
                />
              </div>
              <div>
                <LabledDropdown
                  defaultOption={triggeredPoint[index] || "Select Point"}
                  options={["Point 1", "Point 2", "Point 3"]}
                  onSelect={(option) => {
                    const newPoint = [...triggeredPoint];
                    newPoint[index] = option;
                    setTriggeredPoint(newPoint);
                  }}
                />
              </div>
              <div>
                <LabledDropdown
                  defaultOption={triggeredAction[index] || "Select Action"}
                  options={["Action 1", "Action 2", "Action 3"]}
                  onSelect={(option) => {
                    const newAction = [...triggeredAction];
                    newAction[index] = option;
                    setTriggeredAction(newAction);
                  }}
                />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Trigger;
