import { useId } from 'react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select.tsx';
import { COLUMN_SPAN_LABELS, COLUMN_SPANS, ColumnSpan, normalizeColumnSpan } from '../../../../utils/questionnaireLayout.ts';

interface Props {
    value: unknown;
    onChange: (span: ColumnSpan) => void;
    disabled?: boolean;
}

// The keyboard and screen-reader companion to dragging a field's right edge; both write the same span.
const FieldWidthControl = ({ value, onChange, disabled }: Props) => {
    const id = useId();

    return (
        <div className="flex flex-col gap-2">
            <label htmlFor={id} className="ak-label">Field width</label>
            <Select value={String(normalizeColumnSpan(value))}
                    onValueChange={(next) => onChange(normalizeColumnSpan(Number(next)))}
                    disabled={disabled}>
                <SelectTrigger id={id}>
                    <SelectValue/>
                </SelectTrigger>
                <SelectContent>
                    {COLUMN_SPANS.map((span) => (
                        <SelectItem key={span} value={String(span)}>{COLUMN_SPAN_LABELS[span]}</SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
};

export default FieldWidthControl;