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

class ComponentPage extends DemoPage {
  override accessor componentName = 'Using separators'

  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: 'root',
        label: 'Font size',
        icon: formatSize,
        execute: (args: CommandExecuteOptions): void => {
          console.log('Selected option:', args.item.id)
        },
        children: [
          {
            label: '0.75 rem',
            id: '0.75rem',
          },
          {
            label: '1 rem',
            id: '1rem',
          },
          {
            label: '1.25 rem',
            id: '1.25rem',
          },
          {
            label: '1.5 rem',
            id: '1.5rem',
          },
          {
            label: '2 rem',
            id: '2rem',
          },
        ],
      },
      {
        target: 'root',
        label: 'Font family',
        icon: title,
        execute: (args: CommandExecuteOptions): void => {
          console.log('Selected font:', args.item.id)
        },
        children: [
          {
            label: 'Arial',
            id: 'Arial',
          },
          {
            label: 'Calibri',
            id: 'Calibri',
          },
          {
            label: 'Consolas',
            id: 'Consolas',
          },
          {
            label: 'Courier New',
            id: 'Courier New',
          },
          {
            label: 'Open Sans',
            id: 'Open Sans',
          },
          {
            label: 'Roboto',
            id: 'Roboto',
          },
          {
            label: 'Times New Roman',
            id: 'Times New Roman',
          },
          {
            type: 'separator',
          },
          {
            label: 'Custom font',
            id: 'custom-font',
            icon: fontDownload,
          },
        ],
      },
      {
        type: 'separator',
        target: 'root',
      },
      {
        target: 'root',
        label: 'Paste',
        title: 'Paste the value',
        icon: paste,
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
      {
        target: 'root',
        label: 'Copy',
        title: 'Copies the object',
        icon: copy,
        execute: (args: CommandExecuteOptions): void => {
          console.log(args)
        },
      },
      {
        type: 'separator',
        target: 'root',
      },
      {
        target: 'root',
        label: 'Add',
        children: [
          {
            label: 'Event',
            children: [
              {
                type: 'label',
                label: 'Notification',
              },
              {
                label: 'Resource updated',
                id: 'event-updated',
              },
              {
                label: 'Resource deleted',
                id: 'event-deleted',
              },
              {
                type: 'label',
                label: 'Mutation',
              },
              {
                label: 'Create resource',
                id: 'event-create',
              },
            ],
          },
        ],
        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">Contextual menu with separators</h2>
        <div id="workspace"></div>
      </section>
    `
  }
}

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