import { html, TemplateResult } from 'lit'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
import {
  ContextMenuCommand,
  CheckedMenuOptions,
  CommandExecuteOptions,
} from '../../../src/elements/contextual-menu/internals/types.js'

interface StoreSchema {
  'font-size': string
}

class ComponentPage extends DemoPage {
  override accessor componentName = 'Radio items context menu'

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

  initContextMenu(): void {
    const container = document.body.querySelector('#workspace') as HTMLElement
    const instance = new ContextualMenu<StoreSchema>(container)
    const commands: ContextMenuCommand<StoreSchema>[] = [
      {
        target: 'all',
        label: 'Font',
        title: 'Select a default font for the UI',
        execute: (ctx: CommandExecuteOptions<StoreSchema>): void => {
          const size = ctx.item.id.replace('font-', '')
          ctx.store['font-size'] = size
        },
        children: [
          {
            type: 'radio',
            label: 'Small',
            id: 'font-small',
            checked: (ctx: CheckedMenuOptions<StoreSchema>): boolean => {
              const fs = ctx.store['font-size']
              return fs === 'small'
            },
          },
          {
            type: 'radio',
            label: 'Normal',
            id: 'font-normal',
            checked: (ctx: CheckedMenuOptions<StoreSchema>): boolean => {
              const fs = ctx.store['font-size']
              return !fs || fs === 'normal'
            },
          },
          {
            type: 'radio',
            label: 'Large',
            id: 'font-large',
            checked: (ctx: CheckedMenuOptions<StoreSchema>): boolean => {
              const fs = ctx.store['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()
