import { useEffect, useState } from 'react'
import RenameInput from '../../../../../ui/inputs/RenameInput'
import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
import Trigger from '../trigger/Trigger'
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import ProcessAction from '../actions/ProcessAction'

function MachineMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "process">("default");
    const [selectedPointData, setSelectedPointData] = useState<MachinePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
    const { getPointByUuid, updateAction } = useProductStore();
    const { selectedProduct } = useSelectedProduct();

    useEffect(() => {
        if (selectedEventData) {
            const point = getPointByUuid(
                selectedProduct.productId,
                selectedEventData?.data.modelUuid,
                selectedEventData?.selectedPoint
            ) as MachinePointSchema | undefined;
            if (point && 'action' in point) {
                setSelectedPointData(point);
                setActiveOption(point.action.actionType as "process");
            }
        }
    }, [selectedProduct, selectedEventData])

    const handleActionTypeChange = (option: string) => {
        if (!selectedEventData || !selectedPointData) return;
        const validOption = option as "process";
        setActiveOption(validOption);

        updateAction(
            selectedPointData.action.actionUuid,
            { actionType: validOption }
        );
    };

    const handleRenameAction = (newName: string) => {
        if (!selectedPointData) return;
        updateAction(
            selectedPointData.action.actionUuid,
            { actionName: newName }
        );
    };

    const handleProcessTimeChange = (value: string) => {
        if (!selectedPointData) return;
        updateAction(
            selectedPointData.action.actionUuid,
            { processTime: parseFloat(value) }
        );
    };

    const handleMaterialSelect = (material: string) => {
        if (!selectedPointData) return;
        updateAction(
            selectedPointData.action.actionUuid,
            { swapMaterial: material }
        );
    };

    // Get current values from store
    const currentActionName = selectedPointData
        ? selectedPointData.action.actionName
        : "Action Name";

    const currentProcessTime = selectedPointData
        ? selectedPointData.action.processTime.toString()
        : "1";

    const currentMaterial = selectedPointData
        ? selectedPointData.action.swapMaterial
        : "Default material";

    const availableActions = {
        defaultOption: "process",
        options: ["process"],
    };

    return (
        <>
            {selectedEventData &&
                <>
                    <div className="selected-actions-details">
                        <div className="selected-actions-header">
                            <RenameInput
                                value={currentActionName}
                                onRename={handleRenameAction}
                            />
                        </div>
                        <div className="selected-actions-list">
                            <LabledDropdown
                                defaultOption="process"
                                options={availableActions.options}
                                onSelect={handleActionTypeChange}
                            />
                            {activeOption === "process" &&
                                <ProcessAction
                                    value={currentProcessTime}
                                    min={0.1}
                                    max={60}
                                    defaultValue="1"
                                    onChange={handleProcessTimeChange}
                                    swapOptions={["Default material", "Material 1", "Material 2"]}
                                    swapDefaultOption={currentMaterial}
                                    onSwapSelect={handleMaterialSelect}
                                />
                            }
                        </div>
                    </div>
                    <div className="tirgger">
                        <Trigger />
                    </div>
                </>
            }
        </>
    )
}

export default MachineMechanics