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

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

  constructor() {
    super()
    this.componentName = 'Basic contextual menu'
  }

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

  initContextMenu(): void {
    const container = document.body.querySelector('#workspace') as HTMLElement
    const instance = new ContextualMenu(container)
    const commands: ContextMenuCommand[] = [
      {
        target: 'all',
        label: 'test',
        title: 'All items title',
        id: 'test-command',
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
      {
        target: 'all',
        label: 'visible',
        title: 'test visible title',
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
        visible: () => false,
      },
      {
        target: 'all',
        label: 'Not enabled',
        title: 'test enabled title',
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
        enabled: () => false,
      },
      {
        target: ['section.target', 'aside.target.second'],
        type: 'separator',
      },
      {
        target: 'section.target',
        label: 'Target only',
        title: 'Target only title',
        id: 'target-command',
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
      {
        target: ['section.target', 'aside.target.second'],
        label: 'Target and second only',
        title: 'Target and second title',
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
      {
        target: 'custom',
        label: 'Custom action',
        title: 'Custom action title',
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
      {
        target: 'all',
        label: 'Uninitialized',
        beforeRender: (ctx: BeforeRenderOptions): void => {
          const { menu, target } = ctx
          const label = `Clicked on a ${target.localName}`
          menu.label = label
        },
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
    ]
    instance.registerCommands(commands)
    instance.connect()
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="./">Back</a>
      <section class="demo-section">
        <h2 class="title-large">Basic contextual menu</h2>
        <section class="documentation-section">
          <h3>Interactive demo</h3>
          <div id="workspace">
            <section class="target">Section</section>
            <aside class="target second">Aside</aside>
          </div>
          <p>This menu has a hidden item.</p>
        </section>
      </section>
    `
  }
}

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