import { __esDecorate, __runInitializers } from "tslib";
import { DEFAULT_CATEGORIES_CONFIG } from '@api-client/core/modeling/definitions/Categories.js';
import { bound } from '../../decorators/bound.js';
import { html, nothing } 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 CategoryTaxonomy = (() => {
    let _classSuper = TaxonomyDialog;
    let _instanceExtraInitializers = [];
    let _render_decorators;
    return class CategoryTaxonomy extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _render_decorators = [bound];
            __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 Categories Taxonomy`;
        constructor(domainElement) {
            let config;
            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Categories);
            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.Categories);
            if (semantic) {
                semantic.config = this.config;
            }
            else {
                this.domainElement.semantics.push({
                    id: SemanticType.Categories,
                    config: this.config,
                });
            }
            this.domainElement.domain.notifyChange();
            return super.formCallback(event);
        }
        handleAllowedCategoriesChange(event) {
            const input = event.target;
            const value = input.value.trim();
            if (value) {
                const categories = this.config?.allowedCategories ?? DEFAULT_CATEGORIES_CONFIG.allowedCategories ?? [];
                if (!categories.includes(value)) {
                    categories.push(value);
                    this.config = { ...this.config, allowedCategories: categories };
                    this.requestUpdate();
                }
                input.value = '';
            }
        }
        handleRemoveCategory(event) {
            const chip = event.currentTarget;
            const index = parseInt(chip.dataset.index || '-1', 10);
            if (index >= 0 && this.config?.allowedCategories) {
                this.config.allowedCategories.splice(index, 1);
                this.requestUpdate();
            }
        }
        render() {
            return html `
      <div class="input-group">${this.renderAllowedCategoriesInput()}</div>
      <div class="checkbox-group">
        ${this.renderAllowCustomCategories()} ${this.renderAllowHierarchy()} ${this.renderCaseSensitive()}
        ${this.renderAllowUnicode()}
      </div>
      <div class="input-group">${this.renderMaxDepthInput()}</div>
    `;
        }
        renderAllowCustomCategories() {
            const enabled = this.config?.allowCustomCategories ?? DEFAULT_CATEGORIES_CONFIG.allowCustomCategories;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-custom-categories"
            .checked="${enabled}"
            name="allowCustomCategories"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-custom-categories" class="body-medium">Allow Custom Categories</label>
            <span class="body-small meta"
              >Users are allowed to add custom categories not in the allowed categories list.</span
            >
          </div>
        </div>
        ${renderHelp('taxonomy', 'categories:allowCustomCategories')}
      </div>
    `;
        }
        renderAllowHierarchy() {
            const enabled = this.config?.allowHierarchy ?? DEFAULT_CATEGORIES_CONFIG.allowHierarchy;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-hierarchy"
            .checked="${enabled}"
            name="allowHierarchy"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-hierarchy" class="body-medium">Allow Hierarchy</label>
            <span class="body-small meta">Whether categories can have subcategories.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'categories:allowHierarchy')}
      </div>
    `;
        }
        renderCaseSensitive() {
            const enabled = this.config?.caseSensitive ?? DEFAULT_CATEGORIES_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 categories are case sensitive.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'categories:caseSensitive')}
      </div>
    `;
        }
        renderAllowUnicode() {
            const enabled = this.config?.allowUnicode ?? DEFAULT_CATEGORIES_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 categories.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'categories:allowUnicode')}
      </div>
    `;
        }
        renderAllowedCategoriesInput() {
            const value = this.config?.allowedCategories ?? DEFAULT_CATEGORIES_CONFIG.allowedCategories;
            const chips = (value || []).map((category, index) => html `<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveCategory}"
          >${category}</ui-chip
        >`);
            return html `
      <div class="row input-row">
        <div class="input chips-input">
          <ui-outlined-text-field
            class="input"
            name="allowedCategories"
            label="Allowed Categories"
            @change="${this.handleAllowedCategoriesChange}"
            supportingText="Add a category and press Enter to add it to the list."
          ></ui-outlined-text-field>
          <ui-chip-set>${chips}</ui-chip-set>
        </div>
        ${renderHelp('taxonomy', 'categories:allowedCategories')}
      </div>
    `;
        }
        renderMaxDepthInput() {
            const enabled = this.config?.allowHierarchy ?? DEFAULT_CATEGORIES_CONFIG.allowHierarchy;
            if (!enabled) {
                return nothing;
            }
            const value = this.config?.maxDepth ?? DEFAULT_CATEGORIES_CONFIG.maxDepth;
            return html `
      <div class="row input-row">
        <ui-outlined-text-field
          class="input"
          name="maxDepth"
          label="Max Depth"
          type="number"
          min="0"
          .value="${value}"
          @change="${this.handleTextChange}"
        ></ui-outlined-text-field>
        ${renderHelp('taxonomy', 'categories:maxDepth')}
      </div>
    `;
        }
    };
})();
export { CategoryTaxonomy };
//# sourceMappingURL=CategoryTaxonomy.js.map