Made of little things.

import { html } from 'lit';
import { live } from 'lit/directives/live.js';
import { editor } from '../editor-controller';
import type { CacheKind } from '../state/editor-state';
import { baseTools, toolGroups, toolLabel, toolShortcutId } from '../tools';
import { keyHint } from './key-hint';
import { LightElement } from './light-element';

export class BsToolPalette extends LightElement {
    constructor() {
        super();
        this.watch((s) => [s.tool, s.placeOptions, s.shortcutsRev]);
    }
    #toolButton(key: string) {
        const active = editor.state.tool === key;
        return html`<button
            data-tool=${key}
            class=${active ? 'active' : ''}
            aria-pressed=${active}
            ${keyHint(toolShortcutId(key), toolLabel(key))}
            @click=${() => editor.setTool(key)}
        >
            ${toolLabel(key)}
        </button>`;
    }
    render() {
        const { color, patrol, cacheKind } = editor.state.placeOptions;
        return html`<h2>MAP TOOLS</h2>
            <div class="tool-list">${baseTools.map((key) => this.#toolButton(key))}</div>
            ${toolGroups.map(
                ([title, keys]) =>
                    html`<details class="tool-category" open>
                        <summary>${title}</summary>
                        <div class="tool-list">${keys.map((key) => this.#toolButton(key))}</div>
                    </details>`,
            )}
            <label
                >Container color<input
                    type="color"
                    id="container-color"
                    .value=${live(color)}
                    @input=${(e: Event) =>
                        editor.setPlaceOptions({ color: (e.target as HTMLInputElement).value })}
            /></label>
            <label
                ><input
                    type="checkbox"
                    id="patrol"
                    .checked=${live(patrol)}
                    @change=${(e: Event) =>
                        editor.setPlaceOptions({ patrol: (e.target as HTMLInputElement).checked })}
                />
                Patrolling guards</label
            >
            <label
                >Cache contents<select
                    id="cache-kind"
                    .value=${live(cacheKind)}
                    @change=${(e: Event) =>
                        editor.setPlaceOptions({
                            cacheKind: (e.target as HTMLSelectElement).value as CacheKind,
                        })}
                >
                    <option value="">Random loot</option>
                    <option value="weapons">Weapon cache</option>
                    <option value="start">Starter supplies</option>
                </select></label
            >
            <p class="notice">
                Drag to draw rectangles. Select an object to move it. Doors need a selected
                building. Pan with the Pan tool; zoom with the buttons or mouse wheel. Open Help for
                a step-by-step guide.
            </p>`;
    }
}
customElements.define('bs-tool-palette', BsToolPalette);