import React, { useRef } from "react";
import {
  AddIcon,
  RemoveIcon,
  ResizeHeightIcon,
} from "../../../../../icons/ExportCommonIcons";
import RenameInput from "../../../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../../../functions/handleResizePannel";
import {
  useSelectedAction,
  useSelectedProduct,
} from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";

interface ActionsListProps {
  selectedPointData: any;
  multipleAction?: boolean;
  handleAddAction?: () => void;
  handleDeleteAction?: (actionUuid: string) => void;
}

const ActionsList: React.FC<ActionsListProps> = ({
  selectedPointData,
  multipleAction = false,
  handleAddAction,
  handleDeleteAction,
}) => {
  const actionsContainerRef = useRef<HTMLDivElement>(null);

  const email = localStorage.getItem("email");
  const organization = email!.split("@")[1].split(".")[0];

  // store
  const { renameAction } = useProductStore();
  const { selectedProduct } = useSelectedProduct();
  const { selectedAction, setSelectedAction } = useSelectedAction();

  const handleRenameAction = (newName: string) => {
    if (!selectedAction.actionId) return;
    const event = renameAction(
      selectedProduct.productId,
      selectedAction.actionId,
      newName
    );
    setSelectedAction(selectedAction.actionId, newName);
    if (event) {
      upsertProductOrEventApi({
        productName: selectedProduct.productName,
        productId: selectedProduct.productId,
        organization: organization,
        eventDatas: event,
      });
    }
  };

  const handleActionSelect = (actionUuid: string, actionName: string) => {
    setSelectedAction(actionUuid, actionName);
  };

  return (
    <div className="actions-list-container">
      <div className="actions">
        <div className="header">
          <div className="header-value">Actions</div>

          <button
            id="add-action-button"
            className="add-button"
            onClick={() => {
              if (handleAddAction) {
                handleAddAction();
              }
            }}
            disabled={!multipleAction}
          >
            <AddIcon /> Add
          </button>
        </div>
        <div
          className="lists-main-container"
          ref={actionsContainerRef}
          style={{ height: "120px" }}
        >
          <div className="list-container">
            {multipleAction &&
              selectedPointData?.actions?.map((action: any) => (
                <div
                  key={action.actionUuid}
                  className={`list-item ${
                    selectedAction.actionId === action.actionUuid
                      ? "active"
                      : ""
                  }`}
                >
                  <button
                    id="action-button"
                    className="value"
                    onClick={() =>
                      handleActionSelect(action.actionUuid, action.actionName)
                    }
                  >
                    <RenameInput
                      value={action.actionName}
                      onRename={(value) => handleRenameAction(value)}
                    />
                  </button>
                  {selectedPointData?.actions?.length > 1 && (
                    <button
                      id="remove-action-button"
                      className="remove-button"
                      onClick={() => {
                        if (handleDeleteAction) {
                          handleDeleteAction(action.actionUuid);
                        }
                      }}
                    >
                      <RemoveIcon />
                    </button>
                  )}
                </div>
              ))}
            {!multipleAction && selectedPointData?.action && (
              <div
                key={selectedPointData.action.actionUuid}
                className={`list-item active`}
              >
                <button
                  id="action-button"
                  className="value"
                  onClick={() =>
                    handleActionSelect(
                      selectedPointData.action.actionUuid,
                      selectedPointData.action.actionName
                    )
                  }
                >
                  <RenameInput
                    value={selectedPointData.action.actionName}
                    onRename={handleRenameAction}
                  />
                </button>
              </div>
            )}
          </div>
          {multipleAction && (
            <button
              className="resize-icon"
              id="action-resize"
              onMouseDown={(e: any) => handleResize(e, actionsContainerRef)}
            >
              <ResizeHeightIcon />
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default ActionsList;
