import type { KeyboardEvent, ReactNode } from 'react';
import type { ConfigType } from '@/types';
import { useI18n } from '@/i18n';
import ConfigInlineEditorForm from '@/components/features/test-configurations/ui/ConfigInlineEditorForm';
import type { ProjectConfigEditState } from '../model/types';

interface ConfigInlineEditorProps {
    type: ConfigType;
    editState: ProjectConfigEditState;
    error: string | null;
    autoFocus?: boolean;
    rowAlign?: 'items-start' | 'items-center';
    onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement>) => void;
    onSave: () => void;
    onCancel: () => void;
    onChange: (next: ProjectConfigEditState) => void;
    renderRandomStringControl?: (value: string) => ReactNode;
}

export default function ConfigInlineEditor({
    type,
    editState,
    error,
    autoFocus,
    rowAlign = 'items-start',
    onKeyDown,
    onSave,
    onCancel,
    onChange,
    renderRandomStringControl,
}: ConfigInlineEditorProps) {
    const { t } = useI18n();

    return (
        <ConfigInlineEditorForm
            type={type}
            editState={editState}
            error={error}
            autoFocus={autoFocus}
            variant="regular"
            rowAlign={rowAlign}
            onChange={onChange}
            onSave={onSave}
            onCancel={onCancel}
            onKeyDown={onKeyDown}
            renderRandomStringControl={renderRandomStringControl}
            t={t}
        />
    );
}
