import { G2_LENS_HEIGHT, G2_LENS_WIDTH, GrayImage } from "../graphics/image";

import { wrapText } from "../graphics/textwrap";

import { getDefaultSmallFont, type BdfFont } from "../graphics/bdffont";

import { clamp } from "../util/numeric-util";

import { DashboardInputEvent, Layer, LayerContext, PaintBelow } from "./layers";

import { GESTURE_DOUBLE_CLICK } from "./gestures";

const DEFAULT_MENU_X = 8;

const DEFAULT_MENU_Y = 8;

const DEFAULT_MENU_WIDTH = 272;

// Menus grow with their item count, from half the screen (matching the old

// fixed quarter-screen-era look) up to the full screen, then scroll.

const DEFAULT_MENU_MIN_HEIGHT = G2_LENS_HEIGHT / 2 - 2 * DEFAULT_MENU_Y;

const MENU_TITLE_HEIGHT = 16;

const MENU_ROW_HEIGHT = 20;

const MENU_BODY_PADDING = 8;

const MENU_HIGHLIGHT_Y_OFFSET = 0;

const MENU_TOGGLE_SWITCH_Y_OFFSET = 1;

const MENU_HIGHLIGHT_HEIGHT = MENU_ROW_HEIGHT - 1;

const MENU_HIGHLIGHT_SELECTED_BACKGROUND_FILL = 15;

const MENU_HIGHLIGHT_SELECTED_BORDER_STROKE = 45;

export type MenuLayout = {

x: number;

y: number;

width: number;

/** Smallest box to draw even when items don't fill it. Default: top half of the screen. */

minHeight?: number;

/** Height cap before the menu starts scrolling. Default: the full screen. */

maxHeight?: number;

};

export type MenuItemRenderArgs = {

image: GrayImage;

x: number;

y: number;

width: number;

height: number;

selected: boolean;

disabled: boolean;

text: string;

ctx: LayerContext;

};

export type MenuItem = {

label: string;

/** Extended description; the Settings panel shows it below the list while the item is selected. */

description?: string;

/** Disabled rows stay visible but render dimly and ignore clicks. */

disabled?: boolean | (() => boolean);

onSelect: (ctx: LayerContext, menu: MenuLayer) => Promise<void> | void;

render?: (args: MenuItemRenderArgs) => void;

};

/**

* Draw a selection highlight for a list row. A focused list fills the row and

* outlines it; a visible-but-unfocused list draws only the outline, so the

* selection stays legible without implying it will receive input.

*/

export function drawSelectionHighlight(

image: GrayImage,

x: number,

y: number,

width: number,

height: number,

focused: boolean,

radius = 6,

): void {

if (focused) {

image.fillRoundedRect(x, y, width, height, MENU_HIGHLIGHT_SELECTED_BACKGROUND_FILL, radius);

}

image.drawRoundedRect(x, y, width, height, MENU_HIGHLIGHT_SELECTED_BORDER_STROKE, radius);

}

/**

* Move a list's scroll position the minimum distance needed to keep the

* selected row inside the visible window, clamped to the list bounds.

* Returns the new scroll row (the index of the first visible item).

*/

export function scrollToKeepSelectionVisible(

scrollRow: number,

selectedIndex: number,

visibleRowCount: number,

itemCount: number,

): number {

if (selectedIndex < scrollRow) {

scrollRow = selectedIndex;

} else if (selectedIndex >= scrollRow + visibleRowCount) {

scrollRow = selectedIndex - visibleRowCount + 1;

}

return clamp(scrollRow, 0, Math.max(0, itemCount - visibleRowCount));

}

/**

* Draw a vertical scrollbar beside a row-scrolled list: a dim track with a

* proportional thumb positioned by scroll fraction. Only call when the list

* actually overflows (itemCount > visibleRowCount).

*/

export function drawListScrollbar(

image: GrayImage,

trackX: number,

trackY: number,

trackHeight: number,

scrollRow: number,

visibleRowCount: number,

itemCount: number,

): void {

image.fillRect(trackX, trackY, 3, trackHeight, 30);

const thumbHeight = Math.max(8, (trackHeight * visibleRowCount / itemCount) | 0);

const maxScrollRow = Math.max(1, itemCount - visibleRowCount);

const thumbY = trackY + (((trackHeight - thumbHeight) * clamp(scrollRow, 0, maxScrollRow) / maxScrollRow) | 0);

image.fillRect(trackX, thumbY, 3, thumbHeight, 120);

}

/**

* Draw a ">" submenu indicator inset at the right edge of a row's selection

* highlight box, vertically centered within it. Pass the same rect as the

* row's drawSelectionHighlight call (the row need not actually be selected).

*/

export function drawSubmenuIndicator(

image: GrayImage,

font: BdfFont,

highlightX: number,

highlightY: number,

highlightWidth: number,

highlightHeight: number,

value: number,

): void {

const arrow = ">";

const x = highlightX + highlightWidth - font.measureText(arrow) - 4;

const y = highlightY + (((highlightHeight - font.lineHeight) / 2) | 0);

image.drawText(font, x, y, arrow, value);

}

export function drawToggleMenuItem(

image: GrayImage,

font: BdfFont,

x: number,

y: number,

width: number,

label: string,

enabled: boolean,

selected: boolean,

): void {

const switchWidth = 34;

const switchHeight = 16;

const switchX = x + width - switchWidth - 2;

const switchY = y + MENU_TOGGLE_SWITCH_Y_OFFSET;

image.drawText(font, x, y + 3, label, 200);

const offFill = selected ? 1 : 18;

image.fillRoundedRect(switchX, switchY, switchWidth, switchHeight, enabled ? 70 : offFill, 8);

image.drawRoundedRect(switchX, switchY, switchWidth, switchHeight, enabled ? 130 : 55, 8);

const knobSize = 12;

const knobX = enabled ? switchX + switchWidth - knobSize - 2 : switchX + 2;

image.fillRoundedRect(knobX, switchY + 2, knobSize, knobSize, enabled ? 230 : selected ? 170 : 90, 6);

}

export function drawRightValueMenuItem(

image: GrayImage,

font: BdfFont,

x: number,

y: number,

width: number,

label: string,

value: string,

): void {

image.drawText(font, x, y + 3, label, 200);

const valueX = x + width - font.measureText(value) - 2;

image.drawText(font, valueX, y + 3, value, 220);

}

export class MenuLayer implements Layer {

private selectedIndex = 0;

private scrollRow = 0;

constructor(

private readonly title: string | null,

private readonly items: MenuItem[],

private readonly layout: MenuLayout = {

x: DEFAULT_MENU_X,

y: DEFAULT_MENU_Y,

width: DEFAULT_MENU_WIDTH,

},

public readonly paintOverBase = false,

) {}

/** Start a newly opened picker on its current value. */

selectItem(index: number): this {

this.selectedIndex = clamp(index, 0, Math.max(0, this.items.length - 1));

return this;

}

paint(ctx: LayerContext, paintBelow: PaintBelow): GrayImage {

const font = getDefaultSmallFont();

const image = paintBelow();

const { x, y, width } = this.layout;

const chromeTop = (this.title ? MENU_TITLE_HEIGHT : 0) + MENU_BODY_PADDING;

const minHeight = this.layout.minHeight ?? DEFAULT_MENU_MIN_HEIGHT;

// Cap to the surface being painted on: a window's stack image may be much

// shorter than the full screen (min-height windows).

const maxHeight = Math.min(

this.layout.maxHeight ?? image.height - y - DEFAULT_MENU_Y,

image.height - y,

);

const contentHeight = chromeTop + this.items.length * MENU_ROW_HEIGHT + MENU_BODY_PADDING;

const height = clamp(contentHeight, Math.min(minHeight, maxHeight), maxHeight);

const visibleRowCount = Math.max(1, ((height - chromeTop - MENU_BODY_PADDING) / MENU_ROW_HEIGHT) | 0);

this.scrollRow = scrollToKeepSelectionVisible(

this.scrollRow,

this.selectedIndex,

visibleRowCount,

this.items.length,

);

// Fill 1, not 0: identical after 4bpp quantization, but 0 is the

// transparent color key when a menu paints on the shell surface.

image.fillRoundedRect(x, y, width, height, 1);

image.drawRoundedRect(x, y, width, height, 72);

if (this.title) {

image.drawText(font, x + 12, y + 8, this.title, 220);

}

const bodyY = y + chromeTop;

const focused = ctx.stack.isFocused();

const lastVisibleRow = Math.min(this.items.length, this.scrollRow + visibleRowCount);

for (let index = this.scrollRow; index < lastVisibleRow; index++) {

const item = this.items[index]!;

const rowY = bodyY + (index - this.scrollRow) * MENU_ROW_HEIGHT;

const selected = index === this.selectedIndex;

const disabled = isMenuItemDisabled(item);

if (selected) {

drawSelectionHighlight(

image,

x + 12,

rowY + MENU_HIGHLIGHT_Y_OFFSET,

width - 24,

MENU_HIGHLIGHT_HEIGHT,

focused,

8,

);

}

if (item.render) {

item.render({

image,

x: x + 22,

y: rowY,

width: width - 44,

height: MENU_ROW_HEIGHT - 3,

selected,

disabled,

text: item.label,

ctx,

});

} else {

image.drawText(font, x + 22, rowY + 3, item.label, disabled ? 70 : selected ? 255 : 200);

}

}

if (this.items.length > visibleRowCount) {

drawListScrollbar(

image,

x + width - 7,

bodyY,

visibleRowCount * MENU_ROW_HEIGHT - 4,

this.scrollRow,

visibleRowCount,

this.items.length,

);

}

return image;

}

async handleInput(event: DashboardInputEvent, ctx: LayerContext): Promise<void> {

if (!this.items.length) {

if (event.type === "double-click") {

ctx.stack.pop();

}

return;

}

switch (event.type) {

case "scroll-up":

this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length;

return;

case "scroll-down":

this.selectedIndex = (this.selectedIndex + 1) % this.items.length;

return;

case "double-click":

ctx.stack.pop();

return;

case "click":

if (!isMenuItemDisabled(this.items[this.selectedIndex]!)) {

await this.items[this.selectedIndex]!.onSelect(ctx, this);

}

return;

default:

return;

}

}

}

/** Open a centered, bordered menu over the current layer. */

export function openModalMenu(

ctx: LayerContext,

title: string,

items: MenuItem[],

initialSelectedIndex = 0,

): void {

const { width, height } = ctx.stack.getBaseSize();

const menuWidth = Math.min(320, width - 40);

const naturalHeight = MENU_TITLE_HEIGHT + 2 * MENU_BODY_PADDING + items.length * MENU_ROW_HEIGHT;

const menuHeight = Math.min(naturalHeight, height - 40);

const layout: MenuLayout = {

x: ((width - menuWidth) / 2) | 0,

y: ((height - menuHeight) / 2) | 0,

width: menuWidth,

minHeight: menuHeight,

maxHeight: menuHeight,

};

ctx.stack.push(new MenuLayer(title, items, layout).selectItem(initialSelectedIndex));

}

export function isMenuItemDisabled(item: MenuItem): boolean {

return typeof item.disabled === "function" ? item.disabled() : item.disabled === true;

}

export class TextPageLayer implements Layer {

constructor(

private readonly title: string,

private readonly body: string,

) {}

paint(ctx: LayerContext): GrayImage {

const font = getDefaultSmallFont();

const image = new GrayImage(G2_LENS_WIDTH, G2_LENS_HEIGHT, 0);

image.drawText(font, 18, 14, this.title, 220);

image.drawRect(12, 12, G2_LENS_WIDTH - 24, G2_LENS_HEIGHT - 24, 52);

const wrapped = wrapText(font, this.body, G2_LENS_WIDTH - 60);

const footerY = G2_LENS_HEIGHT - 48;

const maxBodyLines = Math.max(0, Math.floor((footerY - 50) / 14));

for (let index = 0; index < Math.min(wrapped.length, maxBodyLines); index++) {

image.drawText(font, 24, 42 + index * 14, wrapped[index]!, 190);

}

image.drawText(font, 24, footerY, `${GESTURE_DOUBLE_CLICK} back`, 110);

return image;

}

handleInput(event: DashboardInputEvent, ctx: LayerContext): void {

if (event.type === "double-click") {

ctx.stack.pop();

}

}

}