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-documentation-document.js';

class ComponentPage extends AmfDemoPage {
  @reactive() selectedId?: string;

  @reactive() selectedType?: string;

  constructor() {
    super();
    this.componentName = 'api-documentation-document';
    this.docsOpened = true;
    this.endpointsOpened = false;
    this.apis = [
      ...this.apis,
      {
        file: 'models/google-drive-api.json',
        label: 'Google Drive',
      },
      {
        file: 'models/async-api.json',
        label: 'Async API',
      },
      {
        file: 'models/Petstore-v2.json',
        label: 'Petstore OAS API',
      },
    ];
    this.autoLoad();
  }

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

  async _loadFile(file: string): Promise<void> {
    await super._loadFile(file);
    this.loaded = true;
  }

  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 } = this;
    if (!selectedId) {
      return html`<p>Select API documentation in the navigation</p>`;
    }
    return html`
    <section class="demo-section">
      <api-documentation-document .domainId="${selectedId}"></api-documentation-document>
    </section>
    `;
  }
}
const instance = new ComponentPage();
instance.render();
