import { html, TemplateResult } from 'lit'
import { AmfDemoPage } from './lib/AmfDemoPage.js'
import { reactive } from '../../src/decorators/index.js'
import type { NavigationLayout } from '../../src/amf/types.js'
import ApiNavigationContextMenu from '../../src/amf/plugins/ApiNavigationContextMenu.js'
import ApiNavigationCommands from '../../src/amf/plugins/ApiNavigationCommands.js'
import type RadioElement from '../../src/md/radio/internals/RadioElement.js'
import '../../src/md/radio/ui-radio.js'
import '../../src/md/checkbox/ui-checkbox.js'

class ComponentDemoPage extends AmfDemoPage {
  @reactive() accessor summary: boolean

  @reactive() accessor filter: boolean

  @reactive() accessor edit: boolean

  @reactive() accessor layout: NavigationLayout | undefined

  @reactive() accessor endpointsExpanded: boolean

  menu?: ApiNavigationContextMenu

  constructor() {
    super()
    // this.componentName = 'api-navigation'

    this.noApiNavigation = true
    this.summary = true
    this.filter = false
    this.edit = false
    this.endpointsExpanded = false

    // this.initializeRouting()

    this.apis = [
      ...this.apis,
      {
        file: 'models/oauth1-fragment.json',
        label: 'OAuth 1 fragment',
      },
      {
        file: 'models/oauth2-fragment.json',
        label: 'OAuth 2 fragment',
      },
      {
        file: 'models/types-list.json',
        label: 'Types list issue',
      },
      {
        file: 'models/missing-endpoints.json',
        label: 'Missing endpoints issue',
      },
      {
        file: 'models/rearrange-api.json',
        label: 'Rearranged endpoints',
      },
      {
        file: 'models/simple-api.json',
        label: 'Simple API',
      },
      {
        file: 'models/api-keys.json',
        label: 'API key',
      },
      {
        file: 'models/oas-demo.json',
        label: 'OAS Demo API',
      },
      {
        file: 'models/oauth-flows.json',
        label: 'OAS OAuth Flow',
      },
      {
        file: 'models/oas-bearer.json',
        label: 'OAS Bearer',
      },
      {
        file: 'models/ext-docs.json',
        label: 'External docs',
      },
      {
        file: 'models/async-api.json',
        label: 'AsyncAPI',
      },
      {
        file: 'models/unordered-endpoints.json',
        label: 'Unordered endpoints API',
      },
      {
        file: 'models/google-drive-api.json',
        label: 'Google Drive',
      },
      {
        file: 'models/mocking-service.json',
        label: 'Lots of operations',
      },
      {
        file: 'models/no-endpoints.json',
        label: 'No endpoints',
      },
      {
        file: 'models/streetlights2.json',
        label: 'streetlights 2 (unsorted for the tree layout)',
      },
      {
        file: 'models/APIC-449.json',
        label: 'APIC-449',
      },
      {
        file: 'models/APIC-554.json',
        label: 'APIC-554',
      },
      {
        file: 'models/APIC-554-ii.json',
        label: 'APIC-554-ii',
      },
      {
        file: 'models/APIC-641.json',
        label: 'APIC-641',
      },
      {
        file: 'models/APIC-711.json',
        label: 'APIC-711 - A library',
      },
      {
        file: 'models/SE-19215.json',
        label: 'SE-19215',
      },
    ]
    this.autoLoad()
  }

  override updated(): void {
    // super.updated()
    const nav = document.querySelector('api-navigation')
    if (!nav) {
      return
    }
    if (this.menu && this.menu.workspace === nav) {
      return
    }
    if (this.menu && this.menu.workspace !== nav) {
      this.menu.disconnect()
      this.menu = undefined
    }
    this.menu = new ApiNavigationContextMenu(nav, { cancelNativeWhenHandled: true })
    this.menu.registerCommands(ApiNavigationCommands)
    this.menu.connect()
  }

  _navigationHandler(e: CustomEvent): void {
    console.log(e.detail)
  }

  _toggleLayoutOption(e: Event): void {
    const button = e.target as RadioElement
    const { value } = button
    this.layout = value as NavigationLayout
    console.log('Selected layout', value)
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="./">Back</a>
      ${this.demoTemplate()}
    `
  }

  demoTemplate(): TemplateResult {
    const { summary, filter, edit, layout, endpointsExpanded } = this
    return html`
      <section class="demo-section">
        <api-navigation
          role="navigation"
          ?summary="${summary}"
          ?edit="${edit}"
          ?filter="${filter}"
          .layout="${layout}"
          ?endpointsExpanded="${endpointsExpanded}"
          @apinavigate="${this._navigationHandler}"
        >
        </api-navigation>
      </section>

      <section class="demo-section">
        <h2 class="headline-medium">View control</h2>

        <div>
          <p class="block" id="mainOptionsLabel">Options</p>
          <label class="label-large">
            <ui-checkbox
              @change="${this._toggleBooleanOption}"
              ?checked="${summary}"
              name="summary"
              aria-describedby="mainOptionsLabel"
            ></ui-checkbox>
            Render summary
          </label>

          <label class="label-large">
            <ui-checkbox
              @change="${this._toggleBooleanOption}"
              ?checked="${filter}"
              name="filter"
              aria-describedby="mainOptionsLabel"
            ></ui-checkbox>
            Enable filter
          </label>

          <label class="label-large">
            <ui-checkbox
              @change="${this._toggleBooleanOption}"
              ?checked="${edit}"
              name="edit"
              aria-describedby="mainOptionsLabel"
            ></ui-checkbox>
            Edit mode
          </label>

          <label class="label-large">
            <ui-checkbox
              @change="${this._toggleBooleanOption}"
              ?checked="${endpointsExpanded}"
              name="endpointsExpanded"
              aria-describedby="mainOptionsLabel"
            ></ui-checkbox>
            Expand endpoints
          </label>
        </div>

        <div>
          <p id="mainOptionsLabel" class="block">Layout</p>

          <label class="label-medium">
            <ui-radio
              name="layout"
              value="off"
              @change="${this._toggleLayoutOption}"
              aria-labelledby="mainOptionsLabel"
            ></ui-radio>
            None
          </label>
          <label class="label-medium">
            <ui-radio
              name="layout"
              value="tree"
              @change="${this._toggleLayoutOption}"
              aria-labelledby="mainOptionsLabel"
            ></ui-radio>
            Tree
          </label>
          <label class="label-medium">
            <ui-radio
              name="layout"
              value="natural"
              @change="${this._toggleLayoutOption}"
              aria-labelledby="mainOptionsLabel"
            ></ui-radio>
            Natural
          </label>
          <label class="label-medium">
            <ui-radio
              name="layout"
              value="natural-sort"
              @change="${this._toggleLayoutOption}"
              aria-labelledby="mainOptionsLabel"
            ></ui-radio>
            Natural (sorted)
          </label>
        </div>
      </section>
    `
  }
}

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