import { html, TemplateResult } from 'lit';
import { UiDemoPage } from '../ui/UiDemoPage.js';
import { ContextualMenu } from '../../../src/contextual-menu/ContextualMenu.js';
import { IContextMenuCommand, ICheckedOptions, IExecuteOptions } from '../../../src/contextual-menu/types.js';

class ComponentPage extends UiDemoPage {
  componentName = 'Radio items context menu';

  firstRender(): void {
    super.firstRender();
    this.initContextMenu();
  }

  initContextMenu(): void {
    const container = document.body.querySelector('#workspace') as HTMLElement;
    const instance = new ContextualMenu(container);
    const commands: IContextMenuCommand[] = ([
      {
        target: 'all',
        label: 'Font',
        title: 'Select a default font for the UI',
        execute: (ctx: IExecuteOptions): void => {
          const size = ctx.item.id.replace('font-', '');
          ctx.store.set('font-size', size);
        },
        children: [
          {
            type: 'radio',
            label: 'Small',
            id: 'font-small',
            checked: (ctx: ICheckedOptions): boolean => {
              const fs = ctx.store.get('font-size');
              return fs === 'small';
            },
          },
          {
            type: 'radio',
            label: 'Normal',
            id: 'font-normal',
            checked: (ctx: ICheckedOptions): boolean => {
              const fs = ctx.store.get('font-size');
              return !fs || fs === 'normal';
            },
          },
          {
            type: 'radio',
            label: 'Large',
            id: 'font-large',
            checked: (ctx: ICheckedOptions): boolean => {
              const fs = ctx.store.get('font-size');
              return fs === 'large';
            },
          },
        ],
      },
    ]);
    instance.registerCommands(commands);
    instance.connect();
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="./">Back</a>
      <section class="demo-section">
        <h2 class="title-large">Radio selection</h2>
        <div id="workspace">
          <section class="target">Section</section>
        </div>
      </section>
    `;
  }
}

const instance = new ComponentPage();
instance.render();
