import React, { useEffect, useState } from "react";
import {
  useSelectedEventData,
  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";

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);

  useEffect(() => {
    const event = getCurrentEventData();
    setCurrentEventData(event);

    const type = determineAssetType(event);
    setAssetType(type);
  }, [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 />}
        </>
      )}
    </div>
  );
};

export default EventProperties;