import { __esDecorate, __runInitializers } from "tslib";
import { DEFAULT_TAGS_CONFIG } from '@api-client/core/modeling/definitions/Tags.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 Tags annotated association.
 */
let TagsTaxonomy = (() => {
    let _classSuper = TaxonomyDialog;
    let _instanceExtraInitializers = [];
    let _handleAllowedTagsChange_decorators;
    let _handleRemoveTag_decorators;
    let _render_decorators;
    return class TagsTaxonomy 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 Tags Taxonomy`;
        constructor(domainElement) {
            let config;
            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Tags);
            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.Tags);
            if (semantic) {
                semantic.config = this.config;
            }
            else {
                this.domainElement.semantics.push({
                    id: SemanticType.Tags,
                    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_TAGS_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="input-group">${this.renderAllowedTagsInput()}</div>
      <div class="checkbox-group">
        ${this.renderAllowCustomTags()} ${this.renderCaseSensitive()} ${this.renderAllowUnicode()}
      </div>
    `;
        }
        renderAllowCustomTags() {
            const enabled = this.config?.allowCustomTags ?? DEFAULT_TAGS_CONFIG.allowCustomTags;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-custom-tags"
            .checked="${enabled}"
            name="allowCustomTags"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-custom-tags" class="body-medium">Allow Custom Tags</label>
            <span class="body-small meta">Users are allowed to add custom tags not in the allowed tags list.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'tags:allowCustomTags')}
      </div>
    `;
        }
        renderCaseSensitive() {
            const enabled = this.config?.caseSensitive ?? DEFAULT_TAGS_CONFIG.caseSensitive;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="case-sensitive"
            .checked="${enabled}"
            name="caseSensitive"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="case-sensitive" class="body-medium">Case Sensitive</label>
            <span class="body-small meta">Whether tags are case sensitive.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'tags:caseSensitive')}
      </div>
    `;
        }
        renderAllowUnicode() {
            const enabled = this.config?.allowUnicode ?? DEFAULT_TAGS_CONFIG.allowUnicode;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-unicode"
            .checked="${enabled}"
            name="allowUnicode"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-unicode" class="body-medium">Allow Unicode</label>
            <span class="body-small meta">Users are allowed to add unicode characters in tags.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'tags:allowUnicode')}
      </div>
    `;
        }
        renderAllowedTagsInput() {
            const value = this.config?.allowedTags ?? DEFAULT_TAGS_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', 'tags:allowedTags')}
      </div>
    `;
        }
    };
})();
export { TagsTaxonomy };
//# sourceMappingURL=TagsTaxonomy.js.map