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

import React, { useEffect, useRef, useState } from "react";
import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../../ui/inputs/LabledDropdown";
import {
    AddIcon,
    RemoveIcon,
    ResizeHeightIcon,
} from "../../../../icons/ExportCommonIcons";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../../functions/handleResizePannel";
import { handleActionToggle } from "./functions/handleActionToggle";
import { handleDeleteAction } from "./functions/handleDeleteAction";
import DefaultAction from "./actions/DefaultAction";
import SpawnAction from "./actions/SpawnAction";
import SwapAction from "./actions/SwapAction";
import DespawnAction from "./actions/DespawnAction";
import TravelAction from "./actions/TravelAction";
import PickAndPlaceAction from "./actions/PickAndPlaceAction";
import ProcessAction from "./actions/ProcessAction";
import StorageAction from "./actions/StorageAction";
import Trigger from "./trigger/Trigger";

import { useSelectedEventData, useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore";

const EventProperties: React.FC = () => {
    const actionsContainerRef = useRef<HTMLDivElement>(null);

    const [activeOption, setActiveOption] = useState("default");
    const [selectedItem, setSelectedItem] = useState<{ item: { uuid: string; name: string } | null; }>({ item: null });
    const { selectedEventData } = useSelectedEventData();
    const { getEventByModelUuid } = useProductStore();
    const { selectedProduct } = useSelectedProduct();

    useEffect(() => {
        const actions = getActions();
        if (actions.length > 0 && !selectedItem.item) {
            setSelectedItem({ item: actions[0] });
        }
    }, [selectedEventData]);

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

    const getAssetType = () => {
        const event = getCurrentEventData();
        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;
        }
    };

    const getAvailableActions = () => {
        switch (getAssetType()) {
            case "conveyor":
                return {
                    defaultOption: "default",
                    options: ["default", "spawn", "swap", "despawn"],
                };
            case "vehicle":
                return {
                    defaultOption: "travel",
                    options: ["travel"],
                };
            case "roboticArm":
                return {
                    defaultOption: "pickAndPlace",
                    options: ["pickAndPlace"],
                };
            case "machine":
                return {
                    defaultOption: "process",
                    options: ["process"],
                };
            case "storageUnit":
                return {
                    defaultOption: "store",
                    options: ["store", "spawn"],
                };
            default:
                return {
                    defaultOption: "default",
                    options: ["default"],
                };
        }
    };

    // Get actions based on asset type
    const getActions = () => {
        if (!selectedEventData?.data) return [];

        const event = selectedEventData.data;
        switch (getAssetType()) {
            case "conveyor":
                return (event as ConveyorEventSchema).points
                    .find((point) => point.uuid === selectedEventData?.selectedPoint)
                    ?.action?.triggers.map((trigger) => ({
                        uuid: trigger.triggerUuid,
                        name: trigger.triggerName,
                    })) || [];
            case "vehicle":
                return (event as VehicleEventSchema).point.action.triggers.map(
                    (trigger) => ({
                        uuid: trigger.triggerUuid,
                        name: trigger.triggerName,
                    })
                ) || [];
            case "roboticArm":
                return (event as RoboticArmEventSchema).point.actions.flatMap(
                    (action) =>
                        action.triggers.map((trigger) => ({
                            uuid: trigger.triggerUuid,
                            name: trigger.triggerName,
                        }))
                ) || [];
            case "machine":
                return (event as MachineEventSchema).point.action.triggers.map(
                    (trigger) => ({
                        uuid: trigger.triggerUuid,
                        name: trigger.triggerName,
                    })
                ) || [];
            case "storageUnit":
                return [
                    {
                        uuid: (event as StorageEventSchema).point.action.actionUuid,
                        name: (event as StorageEventSchema).point.action.actionName,
                    },
                ];
            default:
                return [];
        }
    };

    const handleActionToggle = (actionUuid: string) => {
        const actions = getActions();
        const selected = actions.find(action => action.uuid === actionUuid);
        if (selected) {
            setSelectedItem({ item: selected });
        }
    };

    const handleDeleteAction = (actionUuid: string) => {

    };

    const actions = getActions();

    const getSpeed = () => {
        if (!selectedEventData) return "0.5";
        if ("speed" in selectedEventData.data) return selectedEventData.data.speed.toString();
        return "0.5";
    };

    return (
        <>
            {getCurrentEventData() &&
                <div className="event-proprties-wrapper">
                    <div className="header">
                        <div className="header-value">{selectedEventData?.data.modelName}</div>
                    </div>
                    <div className="global-props">
                        <div className="property-list-container">
                            <div className="property-item">
                                <InputWithDropDown
                                    label="Speed"
                                    value="0.5"
                                    min={0}
                                    step={0.1}
                                    defaultValue={getSpeed()}
                                    max={10}
                                    activeOption="s"
                                    onClick={() => { }}
                                    onChange={(value) => console.log(value)}
                                />
                            </div>

                            <div className="property-item">
                                <InputWithDropDown
                                    label="Delay"
                                    value="0.5"
                                    min={0}
                                    step={0.1}
                                    defaultValue="0.5"
                                    max={10}
                                    activeOption="s"
                                    onClick={() => { }}
                                    onChange={(value) => console.log(value)}
                                />
                            </div>
                        </div>
                    </div>
                    {getAssetType() === 'roboticArm' &&
                        <div className="actions-list-container">
                            <div className="actions">
                                <div className="header">
                                    <div className="header-value">Actions</div>
                                    <div className="add-button" onClick={() => { }}>
                                        <AddIcon /> Add
                                    </div>
                                </div>
                                <div
                                    className="lists-main-container"
                                    ref={actionsContainerRef}
                                    style={{ height: "120px" }}
                                >
                                    <div className="list-container">
                                        {actions.map((action) => (
                                            <div
                                                key={action.uuid}
                                                className={`list-item ${selectedItem.item?.uuid === action.uuid ? "active" : ""}`}
                                            >
                                                <div
                                                    className="value"
                                                    onClick={() => handleActionToggle(action.uuid)}
                                                >
                                                    <RenameInput value={action.name} />
                                                </div>
                                                {actions.length > 1 && (
                                                    <div
                                                        className="remove-button"
                                                        onClick={() => handleDeleteAction(action.uuid)}
                                                    >
                                                        <RemoveIcon />
                                                    </div>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                    <div
                                        className="resize-icon"
                                        id="action-resize"
                                        onMouseDown={(e) => handleResize(e, actionsContainerRef)}
                                    >
                                        <ResizeHeightIcon />
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                    <div className="selected-actions-details">
                        <div className="selected-actions-header">
                            <RenameInput value="Action Name" />
                        </div>
                        <div className="selected-actions-list">
                            <LabledDropdown
                                defaultOption={getAvailableActions().defaultOption}
                                options={getAvailableActions().options}
                                onSelect={(option) => setActiveOption(option)}
                            />
                            {activeOption === "default" && <DefaultAction />}
                            {activeOption === "spawn" && <SpawnAction />}
                            {activeOption === "swap" && <SwapAction />}
                            {activeOption === "despawn" && <DespawnAction />}
                            {activeOption === "travel" && <TravelAction />}
                            {activeOption === "pickAndPlace" && <PickAndPlaceAction />}
                            {activeOption === "process" && <ProcessAction />}
                            {activeOption === "store" && <StorageAction />}
                        </div>
                    </div>
                    <div className="tirgger">
                        <Trigger />
                    </div>
                </div>
            }
        </>
    );
};

export default EventProperties;