/* eslint-disable lit-a11y/click-events-have-key-events */
import { html, TemplateResult } from 'lit';
import { AmfDemoPage } from './lib/AmfDemoPage.js';
import { reactive } from '../../src/lib/decorators.js';
import { AmfTypes, ApiNavigationEvent } from '../../src/index.js';
import '../../src/define/amf/api-security-document.js';
import '../../src/define/ui/ui-checkbox.js';

class ComponentPage extends AmfDemoPage {
  @reactive() selectedId?: string;
  
  @reactive() selectedType?: AmfTypes.SelectionType;

  @reactive() settingsOpened: boolean;

  constructor() {
    super();
    this.settingsOpened = true;
    this.componentName = 'api-security-document';
    this.securityOpened = true;
    this.endpointsOpened = false;
    [
      ['api-keys', 'API key (OAS)'],
      ['oauth-flows', 'OAuth 2 flows'],
      ['oas-bearer', 'Bearer token'],
      ['oauth-pkce', 'OAuth 2 PKCE'],
      ['secured-unions', 'Secured unions'],
      ['secured-api', 'Secured API'],
      ['security-api', 'security-api API'],
    ].forEach(([file, label]) => {
      this.apis.push({
        file: `models/${file}.json`,
        label,
      })
    });

    this.initializeRouting();
  }

  _navChanged(e: ApiNavigationEvent): void {
    const { domainId, domainType, passive } = e.detail;
    if (passive) {
      return;
    }
    if (domainType === 'security') {
      this.selectedId = domainId;
      this.selectedType = domainType;
    } else {
      this.selectedId = undefined;
      this.selectedType = undefined;
    }
  }

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

  demoTemplate(): TemplateResult {
    const { loaded } = this;
    return html`
      ${!loaded ? html`<p>Load an API model first.</p>` : this._componentTemplate()}
    `;
  }

  _componentTemplate(): TemplateResult {
    const { selectedId, settingsOpened } = this;
    if (!selectedId) {
      return html`<p>Select API documentation in the navigation</p>`;
    }
    return html`
    <section class="demo-section">
      <api-security-document
        .domainId="${selectedId}"
        ?settingsOpened="${settingsOpened}"
        slot="content"
      >
      </api-security-document>
    </section>

    <section class="demo-section">
      <p class="block" id="mainOptionsLabel">Options</p>

      <label class="label-large">
        <ui-checkbox
          @change="${this._toggleBooleanOption}" 
          ?checked="${settingsOpened}"
          name="settingsOpened"
          aria-describedby="mainOptionsLabel"
        ></ui-checkbox>
        Settings opened
      </label>
    </section>
    `;
  }
}
const instance = new ComponentPage();
instance.render();
