import { __esDecorate, __runInitializers } from "tslib";
import { TaxonomyDialog } from './TaxonomyDialog.js';
import { SemanticType } from '@api-client/core/modeling/Semantics.js';
import { bound } from '../../decorators/bound.js';
import { html } from 'lit';
import { renderHelp } from '../../help/render.js';
import { DEFAULT_EMAIL_CONFIG } from '@api-client/core/modeling/definitions/Email.js';
/**
 * A dialog to render and edit the Email taxonomy semantic on a domain property.
 */
let EmailTaxonomy = (() => {
    let _classSuper = TaxonomyDialog;
    let _instanceExtraInitializers = [];
    let _render_decorators;
    return class EmailTaxonomy 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 Email Taxonomy`;
        constructor(domainElement) {
            let config;
            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Email);
            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.Email);
            if (semantic) {
                semantic.config = this.config;
            }
            else {
                this.domainElement.semantics.push({
                    id: SemanticType.Email,
                    config: this.config,
                });
            }
            this.domainElement.domain.notifyChange();
            return super.formCallback(event);
        }
        handleAllowedDomainsChange(event) {
            const input = event.target;
            const value = input.value.trim();
            if (value) {
                const domains = this.config?.allowedDomains ?? DEFAULT_EMAIL_CONFIG.allowedDomains ?? [];
                if (!domains.includes(value)) {
                    domains.push(value);
                    this.config = { ...this.config, allowedDomains: domains };
                    this.requestUpdate();
                }
                input.value = ''; // Clear the input after adding
            }
        }
        handleRemoveDomain(event) {
            const chip = event.target;
            const index = parseInt(chip.dataset.index || '0', 10);
            if (!isNaN(index) && this.config?.allowedDomains) {
                this.config.allowedDomains.splice(index, 1);
                this.requestUpdate();
            }
        }
        render() {
            return html `
      <div class="checkbox-group">
        ${this.renderAllowSubaddresses()} ${this.renderAllowInternational()} ${this.renderRequireVerification()}
      </div>
      <div class="input-group">${this.renderAllowedDomainsInput()}</div>
    `;
        }
        renderAllowSubaddresses() {
            const enabled = this.config?.allowSubaddressing ?? DEFAULT_EMAIL_CONFIG.allowSubaddressing;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-subaddresses"
            name="allowSubaddresses"
            .checked="${enabled}"
            @change="${this.handleBooleanChange}"
          >
          </ui-checkbox>
          <div class="label">
            <label for="allow-subaddresses" class="body-medium">Allow Subaddresses</label>
            <span class="body-small meta">Whether to allow emails like <code>user+tag@domain.com</code>.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'email:allowSubaddressing')}
      </div>
    `;
        }
        renderAllowInternational() {
            const enabled = this.config?.allowInternational ?? DEFAULT_EMAIL_CONFIG.allowInternational;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-international"
            name="allowInternational"
            .checked="${enabled}"
            @change="${this.handleBooleanChange}"
          >
          </ui-checkbox>
          <div class="label">
            <label for="allow-international" class="body-medium">Allow International Characters</label>
            <span class="body-small meta">Whether to allow non-ASCII characters in email addresses.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'email:allowInternational')}
      </div>
    `;
        }
        renderRequireVerification() {
            const enabled = this.config?.requireVerification ?? DEFAULT_EMAIL_CONFIG.requireVerification;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="require-verification"
            name="requireVerification"
            .checked="${enabled}"
            @change="${this.handleBooleanChange}"
          >
          </ui-checkbox>
          <div class="label">
            <label for="require-verification" class="body-medium">Require Email Verification</label>
            <span class="body-small meta">Whether to require email verification for new users.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'email:requireVerification')}
      </div>
    `;
        }
        renderAllowedDomainsInput() {
            const value = this.config?.allowedDomains ?? DEFAULT_EMAIL_CONFIG.allowedDomains;
            const chips = (value || []).map((domain, index) => html `<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveDomain}"
          >${domain}</ui-chip
        >`);
            return html `
      <div class="row input-row">
        <div class="input chips-input">
          <ui-outlined-text-field
            class="input"
            name="allowedDomains"
            label="Allowed Domains (optional)"
            @change="${this.handleAllowedDomainsChange}"
            supportingText="Add a domain and press Enter to add it to the list."
          ></ui-outlined-text-field>
          <ui-chip-set>${chips}</ui-chip-set>
        </div>
        ${renderHelp('taxonomy', 'email:allowedDomains')}
      </div>
    `;
        }
    };
})();
export { EmailTaxonomy };
//# sourceMappingURL=EmailTaxonomy.js.map