import { Button, Theme } from '../../ui';
import { HEADER_ICON_SVG } from '../panels/headerIcons';

/** Whatever a tab snaps: the graph canvas, the vector art canvas. */
export interface Snappable {
  setSnapping(on: boolean): void;
}

/** The magnet every tab that snaps carries in its header (#194): an icon toggle, off at first. */
export class SnapToggle {
  readonly button: Button;
  private on = false;

  constructor(private readonly target: () => Snappable) {
    this.button = new Button('', {
      width: Theme.controlHeight,
      icon: HEADER_ICON_SVG.snap,
      toggle: true,
      tooltip: 'Snap to the grid',
      onClick: () => this.set(!this.on),
    });
  }

  get widgets(): readonly Button[] {
    return [this.button];
  }

  set(on: boolean): void {
    this.on = on;
    this.target().setSnapping(on);
    this.button.setToggled(on);
  }

  setEnabled(on: boolean): void {
    this.button.setEnabled(on);
  }
}