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

interface StoreSchema {
  copy?: string
}

class ComponentPage extends DemoPage {
  override accessor componentName = 'Enabled state demo'

  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: 'root',
        label: 'Paste',
        title: 'Paste the value',
        icon: paste,
        execute: (args: CommandExecuteOptions<StoreSchema>): void => {
          console.log(args)
          const copyId = args.store.copy
          console.log('Pasting', copyId)
          delete args.store.copy
        },
        enabled: (args: EnabledMenuOptions<StoreSchema>): boolean => {
          const copyId = args.store.copy
          return !!copyId
        },
      },
      {
        target: 'div.target',
        label: 'Copy',
        title: 'Copies the object',
        icon: copy,
        execute: (args: CommandExecuteOptions<StoreSchema>): void => {
          const { id } = args.target.dataset
          args.store.copy = id
        },
      },
    ]
    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>
        <div id="workspace">
          <div class="target" data-id="test-value"></div>
        </div>
        <p>The "paste" command is enabled after the "copy" command on the target box is executed.</p>
      </section>
    `
  }
}

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