import { __esDecorate, __runInitializers } from "tslib";
import { DEFAULT_COUNTRY_CONFIG } from '@api-client/core/modeling/definitions/Country.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 Country annotated association.
 */
let CountryTaxonomy = (() => {
    let _classSuper = TaxonomyDialog;
    let _instanceExtraInitializers = [];
    let _render_decorators;
    return class CountryTaxonomy 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 Country Taxonomy`;
        constructor(domainElement) {
            let config;
            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Country);
            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.Country);
            if (semantic) {
                semantic.config = this.config;
            }
            else {
                this.domainElement.semantics.push({
                    id: SemanticType.Country,
                    config: this.config,
                });
            }
            this.domainElement.domain.notifyChange();
            return super.formCallback(event);
        }
        handleAllowedCountriesChange(event) {
            const input = event.target;
            const value = input.value.trim();
            if (value) {
                const countries = this.config?.allowedCountries ?? DEFAULT_COUNTRY_CONFIG.allowedCountries ?? [];
                if (!countries.includes(value)) {
                    countries.push(value);
                    this.config = { ...this.config, allowedCountries: countries };
                    this.requestUpdate();
                }
                input.value = '';
            }
        }
        handleRemoveAllowedCountry(event) {
            const chip = event.currentTarget;
            const index = parseInt(chip.dataset.index || '-1', 10);
            if (index >= 0 && this.config?.allowedCountries) {
                this.config.allowedCountries.splice(index, 1);
                this.requestUpdate();
            }
        }
        handleDisallowedCountriesChange(event) {
            const input = event.target;
            const value = input.value.trim();
            if (value) {
                const countries = this.config?.disallowedCountries ?? DEFAULT_COUNTRY_CONFIG.disallowedCountries ?? [];
                if (!countries.includes(value)) {
                    countries.push(value);
                    this.config = { ...this.config, disallowedCountries: countries };
                    this.requestUpdate();
                }
                input.value = '';
            }
        }
        handleRemoveDisallowedCountry(event) {
            const chip = event.currentTarget;
            const index = parseInt(chip.dataset.index || '-1', 10);
            if (index >= 0 && this.config?.disallowedCountries) {
                this.config.disallowedCountries.splice(index, 1);
                this.requestUpdate();
            }
        }
        render() {
            return html `
      <div class="input-group">
        ${this.renderFormatSelect()} ${this.renderAllowedCountries()} ${this.renderDisallowedCountries()}
      </div>
    `;
        }
        renderFormatSelect() {
            const value = this.config?.format ?? DEFAULT_COUNTRY_CONFIG.format;
            return html `
      <div class="row">
        <ui-select
          label="Country format"
          class="input"
          name="format"
          .value="${value}"
          @change="${this.handleSelectChange}"
        >
          <ui-option value="ISO_3166_Alpha_2">
            <div>ISO 3166 Alpha-2 (Recommended)</div>
            <div slot="supporting-text">Store as ISO 3166 Alpha-2 (e.g., US)</div>
          </ui-option>
          <ui-option value="ISO_3166_Alpha_3">
            <div>ISO 3166 Alpha-3</div>
            <div slot="supporting-text">Store as ISO 3166 Alpha-3 (e.g., USA)</div>
          </ui-option>
          <ui-option value="Name">
            <div>Name</div>
            <div slot="supporting-text">Store as country name (e.g., United States)</div>
          </ui-option>
        </ui-select>
        ${renderHelp('taxonomy', 'country:format')}
      </div>
    `;
        }
        renderAllowedCountries() {
            const value = this.config?.allowedCountries ?? DEFAULT_COUNTRY_CONFIG.allowedCountries;
            const chips = (value || []).map((country, index) => html `<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveAllowedCountry}"
          >${country}</ui-chip
        >`);
            return html `
      <div class="row input-row">
        <div class="input chips-input">
          <ui-outlined-text-field
            class="input"
            name="allowedCountries"
            label="Allowed Countries"
            @change="${this.handleAllowedCountriesChange}"
            supportingText="Add a country and press Enter to add it to the list. Use the selected format."
          ></ui-outlined-text-field>
          <ui-chip-set>${chips}</ui-chip-set>
        </div>
        ${renderHelp('taxonomy', 'country:allowedCountries')}
      </div>
    `;
        }
        renderDisallowedCountries() {
            const value = this.config?.disallowedCountries ?? DEFAULT_COUNTRY_CONFIG.disallowedCountries;
            const chips = (value || []).map((country, index) => html `<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveDisallowedCountry}"
          >${country}</ui-chip
        >`);
            return html `
      <div class="row input-row">
        <div class="input chips-input">
          <ui-outlined-text-field
            class="input"
            name="disallowedCountries"
            label="Disallowed Countries"
            @change="${this.handleDisallowedCountriesChange}"
            supportingText="Add a country and press Enter to add it to the list. Use the selected format."
          ></ui-outlined-text-field>
          <ui-chip-set>${chips}</ui-chip-set>
        </div>
        ${renderHelp('taxonomy', 'country:disallowedCountries')}
      </div>
    `;
        }
    };
})();
export { CountryTaxonomy };
//# sourceMappingURL=CountryTaxonomy.js.map