import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
const HEADING_ALLOWLIST = new Set([
    'p',
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
]);
function isHeadingTag(v) {
    return HEADING_ALLOWLIST.has(v);
}
let NileRteSelect = class NileRteSelect extends LitElement {
    constructor() {
        super(...arguments);
        this.type = '';
        this.options = '[]';
        this.label = '';
        this.disabled = false;
        this.selectedValue = '';
    }
    createRenderRoot() {
        return this;
    }
    mapAlignIcon(v) {
        const map = {
            left: 'format_align_left',
            center: 'format_align_middle',
            right: 'format_align_right',
            justify: 'format_align_justify',
        };
        return map[v] || 'format_align_left';
    }
    get parsedOptions() {
        const source = this.optionsObj ?? this.options;
        let rawArray = (() => {
            if (Array.isArray(source))
                return source;
            try {
                return JSON.parse(String(source));
            }
            catch {
                return [];
            }
        })();
        if (this.type === 'align' && rawArray.length === 0) {
            rawArray = [
                { value: 'left', label: 'Align Left' },
                { value: 'center', label: 'Align Center' },
                { value: 'right', label: 'Align Right' },
                { value: 'justify', label: 'Justify' },
            ];
        }
        let items = rawArray.map((o) => {
            const value = o?.value ?? o;
            const label = o?.label ?? o?.value ?? o;
            const icon = o?.icon ??
                (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
            return { value, label, icon };
        });
        if (this.type === 'heading') {
            const before = items.length;
            items = items.filter(i => isHeadingTag(i.value));
            if (items.length !== before) {
            }
            if (this.selectedValue && !isHeadingTag(this.selectedValue)) {
                this.selectedValue = '';
            }
        }
        return items;
    }
    ensureDefault() {
        if (!this.selectedValue) {
            const first = this.parsedOptions[0];
            if (first)
                this.selectedValue = first.value;
        }
    }
    onSelect(value) {
        if (this.type === 'heading' && !isHeadingTag(value)) {
            console.warn(`[nile-rte-select] Ignoring invalid heading value: ${value}`);
            return;
        }
        this.selectedValue = value;
        this.dispatchEvent(new CustomEvent('change', {
            detail: value,
            bubbles: true,
            composed: true,
        }));
    }
    connectedCallback() {
        super.connectedCallback();
        this.injectLocalStyles();
    }
    injectLocalStyles() {
        if (this.querySelector('style[data-rte-select-style]'))
            return;
        const style = document.createElement('style');
        style.setAttribute('data-rte-select-style', 'true');
        style.textContent = `
      nile-menu.rte-align-menu::part(menu__items-wrapper) {
        display: flex;
      }
      nile-menu.rte-align-menu,
      nile-menu.rte-default-menu {
        margin-top: 0px;
      }
      nile-button.rte-align-trigger::part(base),
      nile-button.rte-default-trigger::part(base) {
        min-width: 32px;
        height: 32px;
        padding: 0px 6px;
        box-shadow: none;
      }
  nile-button.rte-align-trigger::part(base) {

  border: none;
}

 
    `;
        this.insertBefore(style, this.firstChild);
    }
    render() {
        const opts = this.parsedOptions;
        this.ensureDefault();
        const current = opts.find(o => o.value === this.selectedValue);
        if (this.type === 'align') {
            const trigger = current?.icon
                ? html `<nile-icon name="${current.icon}" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} size="20"></nile-icon>`
                : this.label || 'Align';
            return html `
        <nile-dropdown ?disabled=${this.disabled} class="rte-align-dd">
          <nile-button
            slot="trigger"
            variant="tertiary"
            class="rte-align-trigger"
            ?disabled=${this.disabled}
          >
            ${trigger}
          </nile-button>
          <nile-menu class="rte-align-menu">
            ${opts.map(o => html `
                <nile-menu-item
                  class="rte-align-item"
                  ?active=${o.value === this.selectedValue}
                  @click=${() => this.onSelect(o.value)}
                >
                  <nile-tooltip hoist content="${o.label}">
                    <nile-icon name="${o.icon}"></nile-icon>
                  </nile-tooltip>
                </nile-menu-item>
              `)}
          </nile-menu>
        </nile-dropdown>
      `;
        }
        if (this.type === 'font') {
            const triggerText = current?.label || this.label || 'Font';
            return html `
        <nile-dropdown class="rte-default-dd">
          <nile-button
            slot="trigger"
            variant="tertiary"
            class="rte-default-trigger"
            style="font-family: ${current?.value || 'inherit'}"
          >
            ${triggerText} <nile-icon name="arrowdown"></nile-icon>
          </nile-button>
          <nile-menu class="rte-default-menu">
            ${opts.map(o => html `
                <nile-menu-item
                  style="font-family: ${o.value}"
                  ?active=${o.value === this.selectedValue}
                  @click=${() => this.onSelect(o.value)}
                >
                  ${o.label}
                </nile-menu-item>
              `)}
          </nile-menu>
        </nile-dropdown>
      `;
        }
        const triggerText = current?.label || this.label || 'Select';
        return html `
      <nile-dropdown class="rte-default-dd">
        <nile-button
          slot="trigger"
          variant="tertiary"
          class="rte-default-trigger"
        >
          ${triggerText} <nile-icon name="arrowdown"></nile-icon>
        </nile-button>
        <nile-menu class="rte-default-menu">
          ${opts.map(o => html `
              <nile-menu-item
                ?active=${o.value === this.selectedValue}
                @click=${() => this.onSelect(o.value)}
              >
                ${o.label}
              </nile-menu-item>
            `)}
        </nile-menu>
      </nile-dropdown>
    `;
    }
};
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRteSelect.prototype, "type", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRteSelect.prototype, "options", void 0);
__decorate([
    property({ attribute: false })
], NileRteSelect.prototype, "optionsObj", void 0);
__decorate([
    property({ type: String, attribute: true, reflect: true })
], NileRteSelect.prototype, "label", void 0);
__decorate([
    property({ type: Boolean, attribute: true, reflect: true })
], NileRteSelect.prototype, "disabled", void 0);
__decorate([
    state()
], NileRteSelect.prototype, "selectedValue", void 0);
NileRteSelect = __decorate([
    customElement('nile-rte-select')
], NileRteSelect);
export { NileRteSelect };
//# sourceMappingURL=nile-rte-select.js.map