import React, { useRef, useState } from "react";
import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../../ui/inputs/LabledDropdown";
import {
  AddIcon,
  RemoveIcon,
  ResizeHeightIcon,
} from "../../../../icons/ExportCommonIcons";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../../functions/handleResizePannel";
import { handleActionToggle } from "./functions/handleActionToggle";
import { handleDeleteAction } from "./functions/handleDeleteAction";
import DefaultAction from "./actions/DefaultAction";
import SpawnAction from "./actions/SpawnAction";
import SwapAction from "./actions/SwapAction";
import DespawnAction from "./actions/DespawnAction";
import TravelAction from "./actions/TravelAction";
import PickAndPlaceAction from "./actions/PickAndPlaceAction";
import ProcessAction from "./actions/ProcessAction";
import StorageAction from "./actions/StorageAction";

interface EventPropertiesProps {
  assetType: string;
  selectedPoint: {
    name: string;
    uuid: string;
    actions: {
      uuid: string;
      name: string;
      isUsed: boolean;
    }[];
  };
  selectedItem: {
    item: {
      uuid: string;
      name: string;
      isUsed: boolean;
    } | null;
  };
  setSelectedPoint: (value: string) => void;
  selectedActionSphere: string;
}

const EventProperties: React.FC<EventPropertiesProps> = ({
  assetType,
  selectedPoint,
  selectedItem,
  setSelectedPoint,
  selectedActionSphere,
}) => {
  const actionsContainerRef = useRef<HTMLDivElement>(null);

  const [activeOption, setActiveOption] = useState("default");
  const [dummyactiveOption, setTypeOption] = useState("default");

  const getAvailableActions = () => {
    if (assetType === "conveyor") {
      return {
        defaultOption: "default",
        options: ["default", "spawn", "swap", "despawn"],
      };
    }
    if (assetType === "vehicle") {
      return {
        defaultOption: "travel",
        options: ["travel"],
      };
    }
    if (assetType === "roboticArm") {
      return {
        defaultOption: "pickAndPlace",
        options: ["pickAndPlace"],
      };
    }
    if (assetType === "machine") {
      return {
        defaultOption: "process",
        options: ["process"],
      };
    }
    if (assetType === "store") {
      return {
        defaultOption: "store",
        options: ["store", "spawn"],
      };
    } else {
      return {
        defaultOption: "default",
        options: ["default"],
      };
    }
  };

  return (
    <div className="event-proprties-wrapper">
      <div className="header">
        <div className="header-value">{selectedPoint.name}</div>
      </div>
      <div className="global-props">
        <div className="property-list-container">
          <div className="property-item">
            <LabledDropdown
              defaultOption={dummyactiveOption}
              options={[]}
              onSelect={(option) => setTypeOption(option)}
            />
          </div>
          <div className="property-item">
            <InputWithDropDown
              label="Speed"
              value="0.5"
              min={0}
              step={0.1}
              defaultValue="0.5"
              max={10}
              activeOption="s"
              onClick={() => {}}
              onChange={(value) => console.log(value)}
            />
          </div>
          <div className="property-item">
            <InputWithDropDown
              label="Delay"
              value="0.5"
              min={0}
              step={0.1}
              defaultValue="0.5"
              max={10}
              activeOption="s"
              onClick={() => {}}
              onChange={(value) => console.log(value)}
            />
          </div>
        </div>
      </div>
      <div className="actions-list-container">
        <div className="actions">
          <div className="header">
            <div className="header-value">Actions</div>
            <div className="add-button" onClick={() => {}}>
              <AddIcon /> Add
            </div>
          </div>
          <div
            className="lists-main-container"
            ref={actionsContainerRef}
            style={{ height: "120px" }}
          >
            <div className="list-container">
              {selectedPoint?.actions.map((action) => (
                <div
                  key={action.uuid}
                  className={`list-item ${
                    selectedItem.item?.uuid === action.uuid ? "active" : ""
                  }`}
                >
                  <div
                    className="value"
                    onClick={() => handleActionToggle(action.uuid)}
                  >
                    <RenameInput value={action.name} />
                  </div>
                  {selectedPoint?.actions.length > 1 && (
                    <div
                      className="remove-button"
                      onClick={() => handleDeleteAction(action.uuid)}
                    >
                      <RemoveIcon />
                    </div>
                  )}
                </div>
              ))}
            </div>
            <div
              className="resize-icon"
              id="action-resize"
              onMouseDown={(e) => handleResize(e, actionsContainerRef)}
            >
              <ResizeHeightIcon />
            </div>
          </div>
        </div>
      </div>
      <div className="selected-actions-details">
        <div className="selected-actions-header">
          <RenameInput value="Action Name" />
        </div>
        <div className="selected-actions-list">
          <LabledDropdown
            defaultOption={getAvailableActions().defaultOption}
            options={getAvailableActions().options}
            onSelect={(option) => setActiveOption(option)}
          />
          {activeOption === "default" && <DefaultAction />} {/* done */}
          {activeOption === "spawn" && <SpawnAction />} {/* done */}
          {activeOption === "swap" && <SwapAction />} {/* done */}
          {activeOption === "despawn" && <DespawnAction />} {/* done */}
          {activeOption === "travel" && <TravelAction />} {/* done */}
          {activeOption === "pickAndPlace" && <PickAndPlaceAction />}
          {activeOption === "process" && <ProcessAction />} {/* done */}
          {activeOption === "store" && <StorageAction />} {/* done */}
        </div>
      </div>
    </div>
  );
};

export default EventProperties;