import { __esDecorate, __runInitializers } from "tslib";
import { bound } from '../../decorators/bound.js';
import { DEFAULT_CURRENCY_CONFIG } from '@api-client/core/modeling/definitions/Currency.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';
import '../../elements/currency/currency-picker.js';
/**
 * A class that generates a dialog that allows the user to configure the taxonomy of a price/currency field.
 */
let CurrencyTaxonomy = (() => {
    let _classSuper = TaxonomyDialog;
    let _instanceExtraInitializers = [];
    let _render_decorators;
    return class CurrencyTaxonomy 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 Currency Taxonomy`;
        constructor(domainElement) {
            let config;
            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.Currency);
            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.Currency);
            if (semantic) {
                semantic.config = this.config;
            }
            else {
                this.domainElement.semantics.push({
                    id: SemanticType.Currency,
                    config: this.config,
                });
            }
            this.domainElement.domain.notifyChange();
            return super.formCallback(event);
        }
        handleAllowedCurrenciesChange(event) {
            const currencyPicker = event.target;
            const selectedCodes = currencyPicker.selected || [];
            this.config = { ...this.config, allowedCurrencies: selectedCodes.length > 0 ? selectedCodes : undefined };
            this.requestUpdate();
        }
        handleDecimalPlacesChange(event) {
            const input = event.target;
            const value = parseInt(input.value, 10);
            if (!isNaN(value) && value >= 0 && value <= 8) {
                this.config = { ...this.config, decimalPlaces: value };
                this.requestUpdate();
            }
        }
        handleDefaultCurrencyChange(event) {
            const currencyPicker = event.target;
            const selectedCodes = currencyPicker.selected || [];
            if (selectedCodes.length > 0) {
                const selectedCurrency = selectedCodes[0];
                this.config = { ...this.config, defaultCurrency: selectedCurrency };
            }
            else {
                this.config = { ...this.config, defaultCurrency: undefined };
            }
        }
        render() {
            return html `
      <div class="input-group">
        ${this.renderStorageFormatSelect()} ${this.renderDecimalPlacesInput()} ${this.renderAllowedCurrenciesInput()}
        ${this.renderDefaultCurrencyInput()}
      </div>
      <div class="checkbox-group">${this.renderAllowNegative()} ${this.renderValidateCurrencyCode()}</div>
    `;
        }
        renderStorageFormatSelect() {
            const value = this.config?.storageFormat ?? DEFAULT_CURRENCY_CONFIG.storageFormat;
            return html `
      <div class="row">
        <ui-select
          label="Storage Format"
          class="input"
          name="storageFormat"
          .value="${value}"
          @change="${this.handleSelectChange}"
        >
          <ui-option value="decimal">
            <div>Decimal</div>
            <div slot="supporting-text">Store as DECIMAL/NUMERIC (e.g., 19.99)</div>
          </ui-option>
          <ui-option value="integer_cents">
            <div>Integer Cents</div>
            <div slot="supporting-text">Store as INTEGER in smallest unit (e.g., 1999 for $19.99)</div>
          </ui-option>
          <ui-option value="complex_object">
            <div>Complex Object</div>
            <div slot="supporting-text">Store as JSON with amount and currency</div>
          </ui-option>
        </ui-select>
        ${renderHelp('taxonomy', 'currency:storageFormat')}
      </div>
    `;
        }
        renderDecimalPlacesInput() {
            const valueRaw = this.config?.decimalPlaces ?? DEFAULT_CURRENCY_CONFIG.decimalPlaces;
            const value = valueRaw !== undefined ? valueRaw.toString() : '';
            return html `
      <div class="row input-row">
        <ui-outlined-text-field
          class="input"
          name="decimalPlaces"
          type="number"
          .value="${value}"
          label="Decimal Places"
          min="0"
          max="8"
          step="1"
          supportingText="Number of decimal places for precision (0-8)"
          @change="${this.handleDecimalPlacesChange}"
        ></ui-outlined-text-field>
        ${renderHelp('taxonomy', 'currency:decimalPlaces')}
      </div>
    `;
        }
        renderAllowedCurrenciesInput() {
            const allowedCurrencies = this.config?.allowedCurrencies ?? DEFAULT_CURRENCY_CONFIG.allowedCurrencies ?? [];
            return html `
      <div class="row input-row">
        <currency-picker
          label="Allowed Currencies"
          .selected="${allowedCurrencies}"
          @change="${this.handleAllowedCurrenciesChange}"
          multi
          class="input"
        ></currency-picker>
        ${renderHelp('taxonomy', 'currency:allowedCurrencies')}
      </div>
    `;
        }
        renderDefaultCurrencyInput() {
            const allowedCurrencies = this.config?.allowedCurrencies ?? DEFAULT_CURRENCY_CONFIG.allowedCurrencies ?? [];
            const value = this.config?.defaultCurrency ?? DEFAULT_CURRENCY_CONFIG.defaultCurrency;
            const selected = value && allowedCurrencies.includes(value) ? [value] : [];
            return html `
      <div class="row  input-row">
        <currency-picker
          label="Default Currency"
          .selected="${selected}"
          .allowedCurrencies="${allowedCurrencies}"
          @change="${this.handleDefaultCurrencyChange}"
          name="defaultCurrency"
          class="input"
        ></currency-picker>
        ${renderHelp('taxonomy', 'currency:defaultCurrency')}
      </div>
    `;
        }
        renderAllowNegative() {
            const enabled = this.config?.allowNegative ?? DEFAULT_CURRENCY_CONFIG.allowNegative;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="allow-negative"
            .checked="${enabled}"
            name="allowNegative"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="allow-negative" class="body-medium">Allow Negative Values</label>
            <span class="body-small meta">Allow negative amounts for refunds, discounts, etc.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'currency:allowNegative')}
      </div>
    `;
        }
        renderValidateCurrencyCode() {
            const enabled = this.config?.validateCurrencyCode ?? DEFAULT_CURRENCY_CONFIG.validateCurrencyCode;
            return html `
      <div class="row">
        <div class="input checkbox metadata">
          <ui-checkbox
            id="validate-currency-code"
            .checked="${enabled}"
            name="validateCurrencyCode"
            @change="${this.handleBooleanChange}"
          ></ui-checkbox>
          <div class="label">
            <label for="validate-currency-code" class="body-medium">Validate Currency Codes</label>
            <span class="body-small meta">Automatically validate currency codes against ISO 4217 standard.</span>
          </div>
        </div>
        ${renderHelp('taxonomy', 'currency:validateCurrencyCode')}
      </div>
    `;
        }
    };
})();
export { CurrencyTaxonomy };
//# sourceMappingURL=CurrencyTaxonomy.js.map