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

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

  @reactive() selectedType?: string;

  @reactive() selectedOperation?: string;

  constructor() {
    super();
    this.componentName = 'api-channel-document';
    this.apis = [
      {
        file: 'models/async-api.json',
        label: 'Demo API',
      },
      {
        file: 'models/Streetlights.json',
        label: 'Streetlights API',
      },
    ];
    this.autoLoad();
  }

  _navChanged(e: ApiNavigationEvent): void {
    const { domainId, domainType, passive, parentId } = e.detail;
    if (passive) {
      return;
    }
    if (domainType === 'resource') {
      this.selectedId = domainId;
      this.selectedType = domainType;
      this.selectedOperation = undefined;
    } else if (domainType === 'operation') {
      this.selectedId = parentId;
      this.selectedType = 'endpoint';
      this.selectedOperation = domainId;
    } else {
      this.selectedId = undefined;
      this.selectedType = undefined;
      this.selectedOperation = 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.loadedTemplate()}
    `;
  }

  loadedTemplate(): TemplateResult {
    const { selectedId, selectedOperation } = this;
    if (!selectedId) {
      return html`<p>Select API operation in the navigation</p>`;
    }
    return html`
    <section class="demo-section">
      <api-channel-document
        .domainId="${selectedId}"
        .operationId="${selectedOperation}"
        slot="content"
      >
      </api-channel-document>
    </section>
    `;
  }
}
const instance = new ComponentPage();
instance.render();
