import { html, TemplateResult } from 'lit'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import reactive from '../../../src/decorators/reactive.js'

import '../../../src/md/menu/ui-menu.js'
import '../../../src/md/menu/ui-sub-menu.js'
import '../../../src/md/menu/ui-menu-item.js'
import '../../../src/md/button/ui-button.js'
import '../../../src/md/icons/ui-icon.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'UI menu'

  @reactive() accessor basicMenuOutput = ''
  @reactive() accessor basicCount = 0
  @reactive() accessor nestedMenuOutput = ''
  @reactive() accessor nestedCount = 0
  @reactive() accessor overflowMenuOutput = ''
  @reactive() accessor overflowCount = 0

  handleBasicMenuSelect(e: CustomEvent): void {
    const item = e.detail.item as HTMLElement
    const index = e.detail.index
    this.basicMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
    this.basicCount++
  }

  handleNestedMenuSelect(e: CustomEvent): void {
    const item = e.detail.item as HTMLElement
    const index = e.detail.index
    this.nestedMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
    this.nestedCount++
  }

  handleOverflowMenuSelect(e: CustomEvent): void {
    const item = e.detail.item as HTMLElement
    const index = e.detail.index
    this.overflowMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
    this.overflowCount++
  }

  contentTemplate(): TemplateResult {
    const { basicMenuOutput, nestedMenuOutput, nestedCount, basicCount, overflowMenuOutput, overflowCount } = this
    return html`
      <a href="../">Back</a>

      <section class="demo-section">
        <h2 class="title-large">Basic Menu</h2>
        <p>Click the button below to open a basic menu:</p>
        <ui-button id="basic-menu-trigger" color="filled" popovertarget="basic-menu">Open Basic Menu</ui-button>
        <ui-menu id="basic-menu" popover="auto" @select="${this.handleBasicMenuSelect}">
          <ui-menu-item>
            <span slot="start"><ui-icon>add</ui-icon></span>
            <span>New</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>folder</ui-icon></span>
            <span>Open</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>save</ui-icon></span>
            <span>Save</span>
          </ui-menu-item>
          <div class="menu-divider" role="separator"></div>
          <ui-menu-item>
            <span slot="start"><ui-icon>print</ui-icon></span>
            <span>Print</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>file_export</ui-icon></span>
            <span>Export</span>
          </ui-menu-item>
        </ui-menu>
        ${basicMenuOutput
          ? html`<p>${basicMenuOutput}</p>
              <p>Count: ${basicCount}</p>`
          : ''}
      </section>

      <section class="demo-section">
        <h2 class="title-large">Overflow Menu</h2>
        <p>A menu with many items that will overflow and require scrolling:</p>
        <ui-button id="overflow-menu-trigger" color="filled" popovertarget="overflow-menu"
          >Open Overflow Menu</ui-button
        >
        <ui-menu id="overflow-menu" popover="auto" @select="${this.handleOverflowMenuSelect}">
          <ui-menu-item>
            <span slot="start"><ui-icon>home</ui-icon></span>
            <span>Home</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>account_circle</ui-icon></span>
            <span>Profile</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>settings</ui-icon></span>
            <span>Settings</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>notifications</ui-icon></span>
            <span>Notifications</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>mail</ui-icon></span>
            <span>Messages</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>favorite</ui-icon></span>
            <span>Favorites</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>bookmark</ui-icon></span>
            <span>Bookmarks</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>history</ui-icon></span>
            <span>History</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>download</ui-icon></span>
            <span>Downloads</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>cloud</ui-icon></span>
            <span>Cloud Storage</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>share</ui-icon></span>
            <span>Share</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>security</ui-icon></span>
            <span>Security</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>backup</ui-icon></span>
            <span>Backup</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>sync</ui-icon></span>
            <span>Sync</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>account_box</ui-icon></span>
            <span>Account Management</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>payment</ui-icon></span>
            <span>Payment Methods</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>credit_card</ui-icon></span>
            <span>Billing</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>receipt</ui-icon></span>
            <span>Receipts</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>analytics</ui-icon></span>
            <span>Analytics</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>insights</ui-icon></span>
            <span>Insights</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>trending_up</ui-icon></span>
            <span>Trends</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>dashboard</ui-icon></span>
            <span>Dashboard</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>widgets</ui-icon></span>
            <span>Widgets</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>extension</ui-icon></span>
            <span>Extensions</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>apps</ui-icon></span>
            <span>Applications</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>devices</ui-icon></span>
            <span>Devices</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>network_check</ui-icon></span>
            <span>Network Status</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>wifi</ui-icon></span>
            <span>Wi-Fi Settings</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>bluetooth</ui-icon></span>
            <span>Bluetooth</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>location_on</ui-icon></span>
            <span>Location Services</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>language</ui-icon></span>
            <span>Language</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>accessibility</ui-icon></span>
            <span>Accessibility</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>brightness_6</ui-icon></span>
            <span>Display</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>volume_up</ui-icon></span>
            <span>Sound</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>battery_std</ui-icon></span>
            <span>Battery</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>storage</ui-icon></span>
            <span>Storage</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>memory</ui-icon></span>
            <span>Memory</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>update</ui-icon></span>
            <span>Software Update</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>info</ui-icon></span>
            <span>About</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>help</ui-icon></span>
            <span>Help & Support</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>feedback</ui-icon></span>
            <span>Send Feedback</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>bug_report</ui-icon></span>
            <span>Report Bug</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>contact_support</ui-icon></span>
            <span>Contact Support</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>forum</ui-icon></span>
            <span>Community Forum</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>school</ui-icon></span>
            <span>Learning Center</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>library_books</ui-icon></span>
            <span>Documentation</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>video_library</ui-icon></span>
            <span>Video Tutorials</span>
          </ui-menu-item>
          <ui-menu-item>
            <span slot="start"><ui-icon>logout</ui-icon></span>
            <span>Sign Out</span>
          </ui-menu-item>
        </ui-menu>
        ${overflowMenuOutput
          ? html`<p>${overflowMenuOutput}</p>
              <p>Count: ${overflowCount}</p>`
          : ''}
      </section>

      <section class="demo-section">
        <h2 class="title-large">Submenus</h2>
        <p>A menu with submenus:</p>
        <ui-button id="submenu-trigger" color="filled" popovertarget="submenu-demo"
          >Open Attribute-based Menu</ui-button
        >

        <!-- Main Menu -->
        <ui-menu id="submenu-demo" popover="auto" @select="${this.handleNestedMenuSelect}">
          <ui-menu-item id="file-item" submenu="file-submenu">
            <span slot="start"><ui-icon>docs</ui-icon></span>
            <span>File</span>
          </ui-menu-item>
          <ui-menu-item id="edit-item" submenu="edit-submenu">
            <span slot="start"><ui-icon>edit</ui-icon></span>
            <span>Edit</span>
          </ui-menu-item>
          <ui-menu-item id="view-item">
            <span slot="start"><ui-icon>visibility</ui-icon></span>
            <span>View</span>
          </ui-menu-item>
          <!-- File Submenu (separate from main menu) -->
          <ui-sub-menu id="file-submenu" anchor="file-item" popover="auto">
            <ui-menu-item>
              <span slot="start"><ui-icon>add</ui-icon></span>
              <span>New File</span>
            </ui-menu-item>
            <ui-menu-item>
              <span slot="start"><ui-icon>folder</ui-icon></span>
              <span>Open File</span>
            </ui-menu-item>
            <ui-menu-item>
              <span slot="start"><ui-icon>save</ui-icon></span>
              <span>Save File</span>
            </ui-menu-item>
            <ui-menu-item id="export-item" submenu="export-submenu">
              <span slot="start"><ui-icon>file_export</ui-icon></span>
              <span>Export</span>
            </ui-menu-item>

            <!-- Nested Export Submenu -->
            <ui-sub-menu id="export-submenu" anchor="export-item" popover="auto">
              <ui-menu-item>
                <span>Export as PDF</span>
              </ui-menu-item>
              <ui-menu-item>
                <span>Export as PNG</span>
              </ui-menu-item>
              <ui-menu-item>
                <span>Export as SVG</span>
              </ui-menu-item>
            </ui-sub-menu>
          </ui-sub-menu>
          <!-- Edit Submenu -->
          <ui-sub-menu id="edit-submenu" anchor="edit-item" popover="auto">
            <ui-menu-item>
              <span slot="start"><ui-icon>undo</ui-icon></span>
              <span>Undo</span>
            </ui-menu-item>
            <ui-menu-item>
              <span slot="start"><ui-icon>redo</ui-icon></span>
              <span>Redo</span>
            </ui-menu-item>
            <ui-menu-item>
              <span slot="start"><ui-icon>cut</ui-icon></span>
              <span>Cut</span>
            </ui-menu-item>
            <ui-menu-item>
              <span slot="start"><ui-icon>content_copy</ui-icon></span>
              <span>Copy</span>
            </ui-menu-item>
          </ui-sub-menu>
        </ui-menu>
        ${nestedMenuOutput
          ? html`<p>${nestedMenuOutput}</p>
              <p>Count: ${nestedCount}</p>`
          : ''}
      </section>
    `
  }
}

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