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

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 } = 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>
            <ul>
              {products.map((product) => (
                <li key={product.productId}>
                  <button>
                    <AddIcon />
                    {product.productName}
                  </button>
                </li>
              ))}
            </ul>
          </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;