import React, { useEffect, useRef, 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;