Dwinzo_Demo/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

import React, { useEffect, useState } from "react";
import {
  useSelectedEventData,
  useSelectedEventSphere,
} from "../../../../../store/simulation/useSimulationStore";
import ConveyorMechanics from "./mechanics/conveyorMechanics";
import VehicleMechanics from "./mechanics/vehicleMechanics";
import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
import MachineMechanics from "./mechanics/machineMechanics";
import StorageMechanics from "./mechanics/storageMechanics";
import HumanMechanics from "./mechanics/humanMechanics";
import { AddIcon } from "../../../../icons/ExportCommonIcons";
import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
import { useProductContext } from "../../../../../modules/simulation/products/productContext";
import { useParams } from "react-router-dom";
import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
import { useSceneContext } from "../../../../../modules/scene/sceneContext";
import CraneMechanics from "./mechanics/craneMechanics";

const EventProperties: React.FC = () => {
  const { selectedEventData } = useSelectedEventData();
  const { selectedProductStore } = useProductContext();
  const { eventStore, productStore } = useSceneContext();
  const { selectedProduct } = selectedProductStore();
  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
  const [assetType, setAssetType] = useState<string | null>(null);
  const { products, addEvent, getEventByModelUuid } = productStore();
  const { selectedEventSphere } = useSelectedEventSphere();
  const { selectedVersionStore } = useVersionContext();
  const { selectedVersion } = selectedVersionStore();
  const { projectId } = useParams();
  useEffect(() => {
    const event = getCurrentEventData();
    setCurrentEventData(event);

    const type = determineAssetType(event);
    setAssetType(type);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedEventData, selectedProduct]);

  const getCurrentEventData = () => {
    if (!selectedEventData?.data || !selectedProduct) return null;
    return (
      getEventByModelUuid(
        selectedProduct.productUuid,
        selectedEventData.data.modelUuid
      ) ?? null
    );
  };

  const determineAssetType = (event: EventsSchema | null) => {
    if (!event) return null;

    switch (event.type) {
      case "transfer":
        return "conveyor";
      case "vehicle":
        return "vehicle";
      case "roboticArm":
        return "roboticArm";
      case "machine":
        return "machine";
      case "storageUnit":
        return "storageUnit";
      case "human":
        return "human";
      case "crane":
        return "crane";
      default:
        return null;
    }
  };

  return (
    <div className="event-proprties-wrapper">
      {currentEventData && (
        <>
          <div className="header">
            <div className="header-value">
              {selectedEventData?.data.modelName}
            </div>
          </div>
          {assetType === "conveyor" && <ConveyorMechanics />}
          {assetType === "vehicle" && <VehicleMechanics />}
          {assetType === "roboticArm" && <RoboticArmMechanics />}
          {assetType === "machine" && <MachineMechanics />}
          {assetType === "storageUnit" && <StorageMechanics />}
          {assetType === "human" && <HumanMechanics />}
          {assetType === "crane" && <CraneMechanics />}
        </>
      )}
      {!currentEventData && selectedEventSphere && (
        <div className="no-event-selected">
          <p>
            <strong>Oops!</strong> It looks like this object doesn't have an
            event assigned yet. To continue, please link it to one of the
            products below.
          </p>

          <div className="products-list">
            <p>
              <strong>Here are some products you can add it to:</strong>
            </p>
            <div className="product-item">
              {products.map((product) => (
                <button
                  id="add-event-to-product-button"
                  key={product.productUuid}
                  onClick={() => {
                    if (selectedEventData) {
                      handleAddEventToProduct({
                        event: eventStore
                          .getState()
                          .getEventByModelUuid(
                            selectedEventData?.data.modelUuid
                          ),
                        addEvent,
                        selectedProduct,
                        projectId: projectId || '',
                        versionId: selectedVersion?.versionId || '',
                      });
                    }
                  }}
                >
                  <AddIcon />
                  {product.productName}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
      {!selectedEventSphere && (
        <div className="no-event-selected">
          <p>
            <strong>Oops!</strong> It looks like you haven't selected an event
            point yet. Please select an event to view its properties.
          </p>
        </div>
      )}
    </div>
  );
};

export default EventProperties;