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

import React, { useEffect, useState } from "react";
import {
  useSelectedEventData,
  useSelectedEventSphere,
  useSelectedProduct,
} from "../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore";
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 { AddIcon } from "../../../../icons/ExportCommonIcons";
import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
import { useEventsStore } from "../../../../../store/simulation/useEventsStore";

const EventProperties: React.FC = () => {
  const { selectedEventData } = useSelectedEventData();
  const { getEventByModelUuid } = useProductStore();
  const { selectedProduct } = useSelectedProduct();
  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
    null
  );
  const [assetType, setAssetType] = useState<string | null>(null);
  const { products, addEvent } = useProductStore();
  const { selectedEventSphere } = useSelectedEventSphere();

  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.productId,
        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";
      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 />}
        </>
      )}
      {!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
                  key={product.productId}
                  onClick={() => {
                    if (selectedEventData) {
                      handleAddEventToProduct({
                        event: useEventsStore
                          .getState()
                          .getEventByModelUuid(
                            selectedEventData?.data.modelUuid
                          ),
                        addEvent,
                        selectedProduct,
                      });
                    }
                  }}
                >
                  <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;