import { Label, NumberField } from '../ui';
import { type GeneralSettings, ZOOM_TRANSITION_MAX_MS, zoomTransitionMs } from './generalSettings';
import { FormDialog } from './FormDialog';

/**
 * How the editor behaves for whoever sits at it (#309), as opposed to the project's own settings:
 * kept in this browser, the same in every project, and not an undo step.
 */
export class GeneralSettingsDialog extends FormDialog {
  private zoomMs: number;
  private readonly zoomField: NumberField;

  constructor(settings: GeneralSettings, onApply: (settings: GeneralSettings) => void) {
    super(340, 'General settings');
    this.zoomMs = settings.zoomTransitionMs;
    this.zoomField = new NumberField(this.zoomMs, {
      width: 150,
      min: 0,
      max: ZOOM_TRANSITION_MAX_MS,
      step: 10,
      decimals: 0,
      onInput: (value) => {
        this.zoomMs = value;
      },
      onChange: (value) => {
        this.zoomMs = value;
      },
    });
    this.content.add(this.formRow(this.fieldLabel('Zoom (ms)'), this.zoomField));
    this.content.add(
      new Label('How long a zoom or Fit takes to settle. 0 jumps at once.', { style: 'muted' }),
    );
    this.addButtons('Apply', 'primary', () => onApply({ zoomTransitionMs: zoomTransitionMs(this.zoomMs) }));
  }

  /** The settings as the fields stand (test hook). */
  values(): GeneralSettings {
    return { zoomTransitionMs: this.zoomMs };
  }

  /** The zoom field itself, so a check can type into it. */
  get zoomControl(): NumberField {
    return this.zoomField;
  }
}