import { useEffect, useState } from 'react'
import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown'
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 TravelAction from '../actions/TravelAction'

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

    useEffect(() => {
        if (selectedEventData) {
            const point = getPointByUuid(
                selectedProduct.productId,
                selectedEventData.data.modelUuid,
                selectedEventData.selectedPoint
            ) as VehiclePointSchema | undefined;

            if (point) {
                setSelectedPointData(point);
                setActiveOption(point.action.actionType as "travel");
            }
        }
    }, [selectedProduct, selectedEventData])

    const handleSpeedChange = (value: string) => {
        if (!selectedEventData) return;
        updateEvent(
            selectedProduct.productId,
            selectedEventData.data.modelUuid,
            { speed: parseFloat(value) }
        );
    };

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

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

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

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

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

    const handlePickPointChange = (value: string) => {
        if (!selectedPointData) return;
        const [x, y, z] = value.split(',').map(Number);
        updateAction(
            selectedPointData.action.actionUuid,
            { pickUpPoint: { x, y, z } }
        );
    };

    const handleUnloadPointChange = (value: string) => {
        if (!selectedPointData) return;
        const [x, y, z] = value.split(',').map(Number);
        updateAction(
            selectedPointData.action.actionUuid,
            { unLoadPoint: { x, y, z } }
        );
    };

    // Get current values from store
    const currentSpeed = selectedEventData?.data.type === "vehicle"
        ? selectedEventData.data.speed.toString()
        : "0.5";

    const currentActionName = selectedPointData
        ? selectedPointData.action.actionName
        : "Action Name";

    const currentLoadCapacity = selectedPointData
        ? selectedPointData.action.loadCapacity.toString()
        : "1";

    const currentUnloadDuration = selectedPointData
        ? selectedPointData.action.unLoadDuration.toString()
        : "1";

    const currentPickPoint = selectedPointData?.action.pickUpPoint
        ? `${selectedPointData.action.pickUpPoint.x},${selectedPointData.action.pickUpPoint.y},${selectedPointData.action.pickUpPoint.z}`
        : "";

    const currentUnloadPoint = selectedPointData?.action.unLoadPoint
        ? `${selectedPointData.action.unLoadPoint.x},${selectedPointData.action.unLoadPoint.y},${selectedPointData.action.unLoadPoint.z}`
        : "";

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

    return (
        <>
            {selectedEventData &&
                <>
                    <div className="global-props">
                        <div className="property-list-container">
                            <div className="property-item">
                                <InputWithDropDown
                                    label="Speed"
                                    value={currentSpeed}
                                    min={0}
                                    step={0.1}
                                    defaultValue={"0.5"}
                                    max={10}
                                    activeOption="m/s"
                                    onClick={() => { }}
                                    onChange={handleSpeedChange}
                                />
                            </div>
                        </div>
                    </div>

                    <div className="selected-actions-details">
                        <div className="selected-actions-header">
                            <RenameInput
                                value={currentActionName}
                                onRename={handleRenameAction}
                            />
                        </div>
                        <div className="selected-actions-list">
                            <LabledDropdown
                                defaultOption="travel"
                                options={availableActions.options}
                                onSelect={handleActionTypeChange}
                            />

                            {activeOption === 'travel' &&
                                <TravelAction
                                    loadCapacity={{
                                        value: currentLoadCapacity,
                                        min: 1,
                                        max: 100,
                                        defaultValue: "1",
                                        onChange: handleLoadCapacityChange,
                                    }}
                                    unloadDuration={{
                                        value: currentUnloadDuration,
                                        min: 1,
                                        max: 60,
                                        defaultValue: "1",
                                        onChange: handleUnloadDurationChange,
                                    }}
                                // pickPoint={{
                                //     value: currentPickPoint,
                                //     onChange: handlePickPointChange,
                                // }}
                                // unloadPoint={{
                                //     value: currentUnloadPoint,
                                //     onChange: handleUnloadPointChange,
                                // }}
                                />
                            }
                        </div>
                    </div>
                    <div className="tirgger">
                        <Trigger />
                    </div>
                </>
            }
        </>
    )
}

export default VehicleMechanics