import { html } from 'lit';
import { readPropertyTypeLabel } from '../../amf/lib/Utils.js';
import { paramNameTemplate, typeValueTemplate, detailsTemplate, pillTemplate } from './SchemaCommonTemplates.js';
import { ApiDocumentationBase } from './ApiDocumentationBase.js';
/**
 * A web component that renders the documentation for a single request / response parameter.
 */
export default class ApiParameterDocument extends ApiDocumentationBase {
    get parameter() {
        return this.parameterValue;
    }
    set parameter(value) {
        const old = this.parameterValue;
        if (old === value) {
            return;
        }
        this.parameterValue = value;
        this.processGraph();
    }
    /**
     * Prepares the values to be rendered.
     */
    async processGraph() {
        const { parameter } = this;
        if (!parameter) {
            return;
        }
        await this.querySchema();
        this.computeParamType();
        this.requestUpdate();
        await this.updateComplete;
    }
    /**
     * Reads the schema from the parameter.
     */
    async querySchema() {
        this.schemaValue = undefined;
        const param = this.parameterValue;
        if (!param || !param.schema) {
            return;
        }
        this.schemaValue = param.schema;
    }
    /**
     * Computes the schema type label value to render in the type view.
     */
    computeParamType() {
        const schema = this.schemaValue;
        if (!schema) {
            this.typeLabelValue = undefined;
            return;
        }
        const label = readPropertyTypeLabel(schema);
        this.typeLabelValue = label;
    }
    render() {
        const param = this.parameterValue;
        if (!param) {
            return html ``;
        }
        const { name, required } = param;
        const type = this.typeLabelValue;
        const schema = this.schemaValue;
        return html `
    <div class="property-container simple">
      <div class="name-column">
        ${paramNameTemplate(name, required)}
        <span class="headline-separator"></span>
        ${typeValueTemplate(type)}
        ${required ? pillTemplate('Required', 'This property is required.') : ''}
      </div>
      <div class="description-column">
        ${this.descriptionTemplate()}
      </div>
      <div class="details-column">
        ${detailsTemplate(schema)}
      </div>
    </div>
    `;
    }
    /**
     * @returns The template for the parameter description.
     */
    descriptionTemplate() {
        const schema = this.schemaValue;
        if (schema && schema.description) {
            return super.descriptionTemplate(schema.description);
        }
        const param = this.parameterValue;
        if (param && param.description) {
            return super.descriptionTemplate(param.description);
        }
        return '';
    }
}
//# sourceMappingURL=ApiParameterDocument.element.js.map