import { __esDecorate, __runInitializers } from "tslib";
import { DEFAULT_HTML_CONFIG } from '@api-client/core/modeling/definitions/HTML.js';
import { bound } from '../../decorators/bound.js';
import { html } from 'lit';
import { SemanticType } from '@api-client/core/modeling/Semantics.js';
import { renderHelp } from '../../help/render.js';
import { TaxonomyDialog } from './TaxonomyDialog.js';
import '../../md/chip/ui-chip-set.js';
import '../../md/chip/ui-chip.js';
/**
 * A class that generates a dialog that allows the user to configure the taxonomy of a HTML field.
 */
let HtmlTaxonomy = (() => {
    let _classSuper = TaxonomyDialog;
    let _instanceExtraInitializers = [];
    let _handleAllowedTagsChange_decorators;
    let _handleRemoveTag_decorators;
    let _render_decorators;
    return class HtmlTaxonomy extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _handleAllowedTagsChange_decorators = [bound];
            _handleRemoveTag_decorators = [bound];
            _render_decorators = [bound];
            __esDecorate(this, null, _handleAllowedTagsChange_decorators, { kind: "method", name: "handleAllowedTagsChange", static: false, private: false, access: { has: obj => "handleAllowedTagsChange" in obj, get: obj => obj.handleAllowedTagsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _handleRemoveTag_decorators, { kind: "method", name: "handleRemoveTag", static: false, private: false, access: { has: obj => "handleRemoveTag" in obj, get: obj => obj.handleRemoveTag }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        domainElement = __runInitializers(this, _instanceExtraInitializers);
        static title = `Configure HTML Taxonomy`;
        constructor(domainElement) {
            let config;
            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.HTML);
            if (semantic && semantic.config) {
                config = structuredClone(semantic.config);
            }
            else {
                config = {};
            }
            super(config);
            this.domainElement = domainElement;
        }
        formCallback(event) {
            const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.HTML);
            if (semantic) {
                semantic.config = this.config;
            }
            else {
                this.domainElement.semantics.push({
                    id: SemanticType.HTML,
                    config: this.config,
                });
            }
            this.domainElement.domain.notifyChange();
            return super.formCallback(event);
        }
        handleAllowedTagsChange(event) {
            const input = event.target;
            const value = input.value.trim();
            if (value) {
                const tags = this.config?.allowedTags ?? DEFAULT_HTML_CONFIG.allowedTags ?? [];
                if (!tags.includes(value)) {
                    tags.push(value);
                    this.config = { ...this.config, allowedTags: tags };
                    this.requestUpdate();
                }
                input.value = '';
            }
        }
        handleRemoveTag(event) {
            const chip = event.currentTarget;
            const index = parseInt(chip.dataset.index || '-1', 10);
            if (index >= 0 && this.config?.allowedTags) {
                this.config.allowedTags.splice(index, 1);
                this.requestUpdate();
            }
        }
        render() {
            return html `
      <div class="checkbox-group">
        ${this.renderAllowImages()} ${this.renderAllowLinks()} ${this.renderAllowTables()} ${this.renderAllowForms()}
        ${this.renderAllowScripts()} ${this.renderAllowIframes()} ${this.renderAllowEmbedded()}
        ${this.renderAllowStyles()} ${this.renderAllowDataAttributes()}
      </div>
      <div class="input-group">
        ${this.renderRenderModeSelect()} ${this.renderSanitizeLevelSelect()} ${this.renderAllowedTagsInput()}
      </div>
    `;
        }
        renderAllowImages() {
            const enabled = this.config?.allowImages ?? DEFAULT_HTML_CONFIG.allowImages;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-images"
            .checked="${enabled}"
            name="allowImages"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-images" class="body-medium">Allow Images</label>
            <span class="body-small meta">Users are allowed to add images in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowImages')}
      </div>
    `;
        }
        renderAllowLinks() {
            const enabled = this.config?.allowLinks ?? DEFAULT_HTML_CONFIG.allowLinks;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-links"
            .checked="${enabled}"
            name="allowLinks"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-links" class="body-medium">Allow Links</label>
            <span class="body-small meta">Users are allowed to add links in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowLinks')}
      </div>
    `;
        }
        renderAllowTables() {
            const enabled = this.config?.allowTables ?? DEFAULT_HTML_CONFIG.allowTables;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-tables"
            .checked="${enabled}"
            name="allowTables"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-tables" class="body-medium">Allow Tables</label>
            <span class="body-small meta">Users are allowed to add tables in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowTables')}
      </div>
    `;
        }
        renderAllowForms() {
            const enabled = this.config?.allowForms ?? DEFAULT_HTML_CONFIG.allowForms;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-forms"
            .checked="${enabled}"
            name="allowForms"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-forms" class="body-medium">Allow Forms</label>
            <span class="body-small meta">Users are allowed to add forms in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowForms')}
      </div>
    `;
        }
        renderAllowScripts() {
            const enabled = this.config?.allowScripts ?? DEFAULT_HTML_CONFIG.allowScripts;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-scripts"
            .checked="${enabled}"
            name="allowScripts"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-scripts" class="body-medium">Allow Scripts</label>
            <span class="body-small meta">Users are allowed to add scripts in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowScripts')}
      </div>
    `;
        }
        renderAllowIframes() {
            const enabled = this.config?.allowIframes ?? DEFAULT_HTML_CONFIG.allowIframes;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-iframes"
            .checked="${enabled}"
            name="allowIframes"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-iframes" class="body-medium">Allow Iframes</label>
            <span class="body-small meta">Users are allowed to add iframes in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowIframes')}
      </div>
    `;
        }
        renderAllowEmbedded() {
            const enabled = this.config?.allowEmbedded ?? DEFAULT_HTML_CONFIG.allowEmbedded;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-embedded"
            .checked="${enabled}"
            name="allowEmbedded"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-embedded" class="body-medium">Allow Embedded Content</label>
            <span class="body-small meta">Users are allowed to add embedded content in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowEmbedded')}
      </div>
    `;
        }
        renderAllowStyles() {
            const enabled = this.config?.allowStyles ?? DEFAULT_HTML_CONFIG.allowStyles;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-styles"
            .checked="${enabled}"
            name="allowStyles"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-styles" class="body-medium">Allow Styles</label>
            <span class="body-small meta">Users are allowed to add styles in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowStyles')}
      </div>
    `;
        }
        renderAllowDataAttributes() {
            const enabled = this.config?.allowDataAttributes ?? DEFAULT_HTML_CONFIG.allowDataAttributes;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-data-attributes"
            .checked="${enabled}"
            name="allowDataAttributes"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-data-attributes" class="body-medium">Allow Data Attributes</label>
            <span class="body-small meta">Users are allowed to add data attributes in their HTML content.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'html:allowDataAttributes')}
      </div>
    `;
        }
        renderRenderModeSelect() {
            const value = this.config?.renderMode ?? DEFAULT_HTML_CONFIG.renderMode;
            return html `
      <div class="row input-row">
        <ui-select
          label="Render mode"
          class="input"
          name="renderMode"
          .value="${value}"
          @change="${this.handleSelectChange}"
        >
          <ui-option value="html">HTML</ui-option>
          <ui-option value="text">Text</ui-option>
          <ui-option value="both">Both</ui-option>
        </ui-select>
        ${renderHelp('taxonomy', 'html:renderMode')}
      </div>
    `;
        }
        renderSanitizeLevelSelect() {
            const value = this.config?.sanitizeLevel ?? DEFAULT_HTML_CONFIG.sanitizeLevel;
            return html `
      <div class="row input-row">
        <ui-select
          label="Sanitize level"
          class="input"
          name="sanitizeLevel"
          .value="${value}"
          @change="${this.handleSelectChange}"
        >
          <ui-option value="strict">Strict</ui-option>
          <ui-option value="moderate">Moderate</ui-option>
          <ui-option value="none">None</ui-option>
        </ui-select>
        ${renderHelp('taxonomy', 'html:sanitizeLevel')}
      </div>
    `;
        }
        renderAllowedTagsInput() {
            const value = this.config?.allowedTags ?? DEFAULT_HTML_CONFIG.allowedTags;
            const chips = (value || []).map((tag, index) => html `<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveTag}">${tag}</ui-chip>`);
            return html `
      <div class="row input-row">
        <div class="input chips-input">
          <ui-outlined-text-field
            class="input"
            name="allowedTags"
            label="Allowed Tags"
            @change="${this.handleAllowedTagsChange}"
            supportingText="Add a tag and press Enter to add it to the list."
          ></ui-outlined-text-field>
          <ui-chip-set>${chips}</ui-chip-set>
        </div>
        ${renderHelp('taxonomy', 'html:allowedTags')}
      </div>
    `;
        }
    };
})();
export { HtmlTaxonomy };
//# sourceMappingURL=HtmlTaxonomy.js.map