/**
 * InstructionStepListEditor.tsx
 *
 * Hybrid editor for recipe instruction steps:
 * - Detects device type and renders Desktop or Mobile editor accordingly.
 * - Common functionality for adding, removing, and updating steps is centralized.
 */

import {useEffect, useState} from "react";
import type {InstructionStepModel} from "../../models/InstructionStepModel";
import {InstructionStepListDesktopEditor} from "./InstructionStepListDesktopEditor";
import {InstructionStepListMobileEditor} from "./InstructionStepListMobileEditor";

/**
 * Props for the hybrid InstructionStepListEditor
 */
type InstructionStepListEditorProps = {
    instructionStepList: InstructionStepModel[];
    onChange: (steps: InstructionStepModel[]) => void;
};

/**
 * Hybrid wrapper that decides between desktop (drag-and-drop) or mobile (buttons)
 */
export function InstructionStepListEditor({
                                              instructionStepList,
                                              onChange,
                                          }: InstructionStepListEditorProps) {
    const [isTouch, setIsTouch] = useState(false);

    useEffect(() => {
        setIsTouch("ontouchstart" in window || navigator.maxTouchPoints > 0);
    }, []);

    return isTouch ? (
        <InstructionStepListMobileEditor
            instructionStepList={instructionStepList}
            onChange={onChange}
        />
    ) : (
        <InstructionStepListDesktopEditor
            instructionStepList={instructionStepList}
            onChange={onChange}
        />
    );
}

