import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import ApiElement from '../ApiElement.js';
import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js';
import '../../md/icons/ui-icon.js';
let ApiAnnotationDocument = (() => {
    let _classSuper = ApiElement;
    let _instanceExtraInitializers = [];
    let _set_domainModel_decorators;
    let _set_customProperties_decorators;
    return class ApiAnnotationDocument extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _set_domainModel_decorators = [property({ type: Object })];
            _set_customProperties_decorators = [property({ type: Array })];
            __esDecorate(this, null, _set_domainModel_decorators, { kind: "setter", name: "domainModel", static: false, private: false, access: { has: obj => "domainModel" in obj, set: (obj, value) => { obj.domainModel = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _set_customProperties_decorators, { kind: "setter", name: "customProperties", static: false, private: false, access: { has: obj => "customProperties" in obj, set: (obj, value) => { obj.customProperties = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        shapeValue = __runInitializers(this, _instanceExtraInitializers);
        /**
         * Serialized with `ApiSerializer` API domain model.
         * This is to be used instead of `shape`.
         */
        get domainModel() {
            return this.shapeValue;
        }
        set domainModel(value) {
            const oldValue = this.shapeValue;
            if (oldValue === value) {
                return;
            }
            this.shapeValue = value;
            this.processShape();
        }
        propertiesValue;
        /**
         * @returns `true` if any custom property has been found.
         */
        get hasCustomProperties() {
            const properties = this.propertiesValue;
            return Array.isArray(properties) && !!properties.length;
        }
        /**
         * List of custom properties in the shape.
         */
        get customProperties() {
            return this.propertiesValue;
        }
        set customProperties(value) {
            const old = this.propertiesValue;
            if (old === value) {
                return;
            }
            this.propertiesValue = value;
            this.processVisibility();
            this.requestUpdate();
        }
        /**
         * Called when the shape property change.
         */
        processShape() {
            const shape = this.shapeValue;
            this.propertiesValue = undefined;
            if (!shape) {
                return;
            }
            const result = shape.customDomainProperties;
            if (Array.isArray(result) && result.length) {
                this.propertiesValue = result;
            }
            this.processVisibility();
            this.requestUpdate();
        }
        processVisibility() {
            const { hasCustomProperties } = this;
            if (hasCustomProperties) {
                this.setAttribute('aria-hidden', 'false');
                this.removeAttribute('hidden');
            }
            else {
                this.setAttribute('aria-hidden', 'true');
                this.setAttribute('hidden', 'true');
            }
        }
        scalarValue(scalar) {
            let { value = '' } = scalar;
            if (value === 'nil') {
                value = '';
            }
            return value;
        }
        render() {
            const { hasCustomProperties, customProperties } = this;
            if (!hasCustomProperties || !customProperties) {
                return '';
            }
            const content = customProperties.map((prop) => this.renderProperty(prop));
            return html ` ${content} `;
        }
        /**
         * @returns The template for the custom property.
         */
        renderProperty(prop) {
            const { name, extension } = prop;
            const { types } = extension;
            if (types.includes(AmfNamespace.aml.vocabularies.data.Scalar)) {
                return this.renderScalar(name, extension);
            }
            if (types.includes(AmfNamespace.aml.vocabularies.data.Object)) {
                return this.renderObject(name, extension);
            }
            return nothing;
        }
        /**
         * @param name The annotation name
         * @param content The content tp render.
         * @returns The template for the custom property.
         */
        renderAnnotationWrapper(name, content) {
            return html `
      <div class="custom-property">
        <ui-icon class="info-icon" icon="info"></ui-icon>
        <div class="info-value">
          <span class="name text-selectable">${name}</span>
          ${content || ''}
        </div>
      </div>
    `;
        }
        /**
         * @returns The template for the custom property.
         */
        renderScalar(name, scalar) {
            const content = html `<span class="scalar-value text-selectable">${this.scalarValue(scalar)}</span>`;
            return this.renderAnnotationWrapper(name, content);
        }
        /**
         * @returns The template for the custom property.
         */
        renderObject(name, object) {
            const { properties = {} } = object;
            const content = Object.keys(properties).map((key) => {
                const value = properties[key];
                const { types } = value;
                if (types.includes(AmfNamespace.aml.vocabularies.data.Scalar)) {
                    return this.renderObjectScalarProperty(key, value);
                }
                return key;
            });
            return this.renderAnnotationWrapper(name, content);
        }
        /**
         * @returns The template for the custom property.
         */
        renderObjectScalarProperty(name, scalar) {
            const value = this.scalarValue(scalar);
            return html `
      <div class="object-property">
        <span class="object-name text-selectable">${name}</span>
        <span class="object-value text-selectable">${value}</span>
      </div>
    `;
        }
    };
})();
/**
 * An element to render annotations (also known as custom properties)
 * from AMF model.
 *
 * Annotations are part of RAML language and API console supports it.
 * The element looks for annotations in model and renders them.
 */
export default ApiAnnotationDocument;
//# sourceMappingURL=ApiAnnotationDocument.element.js.map