/**
 * Single step component for Desktop editor with drag-and-drop support.
 */

import {useSortable} from "@dnd-kit/sortable";
import {CSS} from "@dnd-kit/utilities";
import type {InstructionStepModel} from "../../models/InstructionStepModel";
import Button from "../basics/Button";
import {X} from "lucide-react"
import {ButtonType} from "../basics/BasicButtonDefinitions";
import {NumberCircle} from "../basics/NumberCircle.tsx";

type InstructionStepEditorDesktopListItemProps = {
    id: string | number;
    index: number;
    step: InstructionStepModel;
    onUpdate: (index: number, value: string) => void;
    onRemove: (index: number) => void;
};

export function InstructionStepEditorDesktopListItem({
                                                         id,
                                                         index,
                                                         step,
                                                         onUpdate,
                                                         onRemove,
                                                     }: InstructionStepEditorDesktopListItemProps) {
    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id});

    const style = {transform: CSS.Transform.toString(transform), transition};

    return (
        <div
            ref={setNodeRef}
            style={style}
            className="flex items-start gap-3"
        >
            <NumberCircle
                {...attributes}
                {...listeners}
                number={index + 1}
                className="cursor-grab"
                title="Ziehen, um neu zu ordnen"
            />

            <textarea
                className="w-full min-h-[60px] resize-none overflow-hidden"
                placeholder={`Schritt ${index + 1}`}
                value={step.text}
                onChange={(e) => onUpdate(index, e.target.value)}
                onInput={(e) => {
                    const el = e.target as HTMLTextAreaElement;
                    el.style.height = "auto";
                    el.style.height = `${el.scrollHeight}px`;
                }}
            />

            <Button
                onClick={() => onRemove(index)}
                icon={X}
                buttonType={ButtonType.DarkButton}
            />
        </div>
    );
}
