// What every part of the device sheet shares: the change of one device by
// one person, and the device's name.

import type * as Y from 'yjs';
import { renameDevice } from '@mdg-filius/doc';
import { useTranslate } from '../i18n/i18n.js';
import { SheetField } from './SheetField.js';

export interface Change {
  readonly doc: Y.Doc;
  readonly id: string;
  readonly origin: object;
  /** Runs a change and ends the undo step. */
  readonly run: <T>(change: () => T) => T;
}

export function NameField({ name, change, shown, disabled = false }: { readonly name: string; readonly change: Change; readonly shown?: string; readonly disabled?: boolean }) {
  const t = useTranslate();
  return (
    <SheetField
      name="name"
      label={t('sheet.name')}
      value={shown ?? name}
      rule="name"
      disabled={disabled}
      onCommit={(text) => change.run(() => (renameDevice(change.doc, change.id, text, change.origin), { value: text }))}
    />
  );
}