import { html, TemplateResult } from 'lit';
import { AmfDemoPage } from './lib/AmfDemoPage.js';
import { reactive } from '../../src/lib/decorators.js';
import { ApiNavigationEvent } from '../../src/index.js';
import '../../src/define/amf/api-summary.js';
import '../../src/define/ui/ui-checkbox.js'

class ComponentPage extends AmfDemoPage {
  @reactive() overrideBaseUri: boolean;

  constructor() {
    super();
    this.componentName = 'api-summary';
    this.overrideBaseUri = false;
    this.noApiNavigation = true;

    [
      ['demo-api', 'Demo API'],
      ['google-drive-api', 'Google Drive'],
      ['prevent-xss', 'Prevent XSS'],
      ['mocking-service', 'Lots of methods'],
      ['no-endpoints', 'No endpoints!'],
      ['no-server', 'No server!'],
      ['multi-server', 'Multiple servers'],
      ['async-api', 'AsyncAPI'],
      ['APIC-641', 'APIC-641'],
      ['APIC-711', 'A library'],
    ].forEach(([file, label]) => {
      this.apis.push({
        file: `models/${file}.json`, 
        label,
      })
    });

    this.autoLoad();
  }

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

  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.loadedTemplate()}
    `;
  }

  loadedTemplate(): TemplateResult {
    return html`
    ${this.componentTemplate()}
    `;
  }

  componentTemplate(): TemplateResult {
    const { overrideBaseUri } = this;
    return html`
    <section class="centered large demo-region">
      <api-summary
        .baseUri="${overrideBaseUri ? 'https://custom.api.com' : undefined}"
        @apinavigate="${this._navigationHandler}"
      >
      </api-summary>
    </section>

    <section class="centered large data-control">
      <label slot="options" id="mainOptionsLabel">Options</label>
      <label class="label-large">
        <ui-checkbox
          @change="${this._toggleBooleanOption}" 
          ?checked="${overrideBaseUri}"
          name="overrideBaseUri"
          aria-describedby="mainOptionsLabel"
        ></ui-checkbox>
        Custom base URI
      </label>
    </section>
    `;
  }
}
const instance = new ComponentPage();
instance.render();
