import { html, TemplateResult } from 'lit'
import { ApiDocumentationBase } from './ApiDocumentationBase.js'
import { Events } from '../../events/amf/Events.js'
import type { IApiDocumentation } from '@api-client/core/amf/definitions/Api.js'

/**
 * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from
 * the AMF graph model.
 */
export default class ApiDocumentationDocument extends ApiDocumentationBase {
  protected documentationValue: IApiDocumentation | undefined

  /**
   * The serialized to a JS object graph model
   */
  get documentation(): IApiDocumentation | undefined {
    return this.documentationValue
  }

  set documentation(value) {
    const old = this.documentationValue
    if (old === value) {
      return
    }
    this.documentationValue = value
    this.processGraph()
  }

  /**
   * Queries the graph store for the API Documentation data.
   */
  override async processGraph(): Promise<void> {
    await this.queryDocument()
    this.requestUpdate()
    await this.updateComplete
  }

  /**
   * Queries for the documentation model.
   */
  async queryDocument(): Promise<void> {
    const { domainId } = this
    if (!domainId) {
      return
    }
    if (this.documentationValue && this.documentationValue.id === domainId) {
      // in case it was set by the parent via the property
      return
    }
    try {
      const info = await Events.Documentation.get(this, domainId)
      this.documentationValue = info
    } catch (e) {
      this.documentationValue = undefined
      const ex = e as Error
      Events.Telemetry.exception(this, ex.message, false)
      Events.Reporting.error(this, ex, `Unable to query for API documentation data: ${ex.message}`, this.localName)
    }
  }

  override render(): TemplateResult {
    const docs = this.documentationValue
    if (!docs) {
      return html``
    }
    return html` ${this.titleTemplate(docs)} ${this.descriptionTemplate(docs.description)} `
  }

  /**
   * @returns The template for the Documentation title.
   */
  protected titleTemplate(docs: IApiDocumentation): TemplateResult | string {
    const { title } = docs
    if (!title) {
      return ''
    }
    return html`
      <div class="documentation-header">
        <div class="documentation-title">
          <span class="label text-selectable">${title}</span>
        </div>
      </div>
    `
  }
}
