import { Dropdown, Menu } from '../ui';
import { POINT_KINDS, type PointKind } from './polygonEdit';

/** Fixed, so the header does not shift when "Point: Symmetric" becomes "Point: Corner". */
export const POINT_BUTTON_WIDTH = 150;

export const POINT_KIND_LABELS: Record<PointKind, string> = {
  straight: 'Straight',
  corner: 'Corner',
  smooth: 'Smooth',
  symmetric: 'Symmetric',
};

/** What the button edits: the point last picked on a canvas, null while none is. */
export interface PointKindTarget {
  readonly pickedKind: PointKind | null;
  setPickedKind(kind: PointKind): void;
}

/**
 * The header's point type (#195), in the Vector art and the Curve tab: the four types a point can
 * be, the one it is now ticked.
 */
export class PointKindButton extends Dropdown {
  constructor(private readonly target: () => PointKindTarget) {
    super(pointLabel(null), { width: POINT_BUTTON_WIDTH });
    this.onClick = () => this.openMenu();
  }

  /** Follows the picked point: its type, or disabled while none is picked. */
  sync(): void {
    const kind = this.target().pickedKind;
    this.setText(pointLabel(kind));
    this.setEnabled(kind !== null);
  }

  private openMenu(): void {
    const items = POINT_KINDS.map((kind) => ({
      label: POINT_KIND_LABELS[kind],
      checked: () => this.target().pickedKind === kind,
      onSelect: () => this.target().setPickedKind(kind),
    }));
    new Menu(items).openBelow(this);
  }
}

function pointLabel(kind: PointKind | null): string {
  return `Point: ${kind ? POINT_KIND_LABELS[kind] : '–'}`;
}