Made of little things.

import { noChange } from 'lit';
import { Directive, directive, PartType, type ElementPart, type PartInfo } from 'lit/directive.js';
import { editor } from '../editor-controller';
import { ariaCombo, formatCombo } from '../key-combo';

/** Current display label for a shortcut, or '' while unbound or still registering. */
export function bindingLabel(id: string): string {
    const state = editor.shortcuts.get(id);
    return state?.binding && state.source !== 'pending' ? formatCombo(state.binding) : '';
}

class KeyHint extends Directive {
    constructor(part: PartInfo) {
        super(part);
        if (part.type !== PartType.ELEMENT) throw new Error('keyHint belongs on an element.');
    }
    render(_id: string, _label?: string) {
        return noChange;
    }
    update(part: ElementPart, [id, label]: [string, string?]) {
        const state = editor.shortcuts.get(id);
        const text = label ?? state?.action.label ?? '';
        const key = bindingLabel(id);
        part.element.setAttribute('title', key ? `${text} (${key})` : text);
        if (key) part.element.setAttribute('aria-keyshortcuts', ariaCombo(state!.binding!));
        else part.element.removeAttribute('aria-keyshortcuts');
        return noChange;
    }
}

/**
 * Element directive: sets `title` and `aria-keyshortcuts` from the live shortcut binding.
 * Hosts watch `shortcutsRev` so hints refresh when the shell rebinds keys.
 */
export const keyHint = directive(KeyHint);