import { loadRecommendationActions } from "@coveo/headless/recommendation";
import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { renderButton } from "../../common/button.js";
import { bindings } from "../../../decorators/bindings.js";
import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
import images_close from "../../../images/close.js";
import search from "../../../images/search.js";
import "../../common/atomic-icon/atomic-icon.js";
function _ts_decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);
    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function _ts_metadata(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
}
const numberOrPixelValuePattern = new RegExp(/^(?=.*(?:\d+|px)$).*$/);
class AtomicIpxButton extends LitElement {
    initialize() {}
    async getRecommendations() {
        const recsEngine = this.bindings.interfaceElement.querySelector('atomic-recs-interface')?.engine;
        if (recsEngine) {
            this.recommendationsLoaded = true;
            recsEngine.dispatch(loadRecommendationActions(recsEngine).getRecommendations());
        }
    }
    async onClick() {
        if (!this.recommendationsLoaded) await this.getRecommendations();
        this.isModalOpen ? this.close() : this.open();
    }
    renderIPXButton() {
        const ariaLabel = this.isModalOpen ? 'Close' : 'Open';
        return renderButton({
            props: {
                style: 'primary',
                part: 'ipx-button',
                class: 'my-2',
                onClick: ()=>this.onClick(),
                ariaLabel: this.label ?? ariaLabel,
                ariaExpanded: this.isModalOpen ? 'true' : 'false'
            }
        })(html`
      <span part="button-icon">
        <atomic-icon
          part="ipx-close-icon"
          .icon=${this.getIcon(this.closeIcon)}
        ></atomic-icon>
        <atomic-icon
          part="ipx-open-icon"
          .icon=${this.getIcon(this.openIcon)}
        ></atomic-icon>
      </span>
      ${when(this.label, ()=>html`<span part="button-text">${this.label}</span>`)}
    `);
    }
    render() {
        const [displayedIcon, hiddenIcon] = this.isModalOpen ? [
            'ipx-close-icon',
            'ipx-open-icon'
        ] : [
            'ipx-open-icon',
            'ipx-close-icon'
        ];
        if (this.isModalOpen && !this.recommendationsLoaded) this.getRecommendations();
        return html`
      <style>
        [part='${displayedIcon}'] {
          transform: translateY(0rem);
        }
        [part='${hiddenIcon}'] {
          transform: translateY(3rem);
        }

        .btn-open {
          [part='${displayedIcon}'] {
            transform: translateY(3rem);
          }

          [part='${hiddenIcon}'] {
            transform: translateY(0rem);
          }
        }
      </style>
      <div class="flex flex-col items-center" part="container">
        ${this.renderIPXButton()}
      </div>
    `;
    }
    get ipxModal() {
        return this.bindings?.interfaceElement?.querySelector('atomic-ipx-modal');
    }
    open() {
        this.isModalOpen = true;
        this.classList.add('btn-open');
        this.ipxModal?.setAttribute('is-open', 'true');
    }
    close() {
        this.isModalOpen = false;
        this.classList.remove('btn-open');
        this.ipxModal?.setAttribute('is-open', 'false');
    }
    getIcon(icon) {
        const initialDiv = document.createElement('div');
        initialDiv.innerHTML = icon;
        const iconElement = initialDiv.querySelector('svg');
        if (!iconElement) return initialDiv.innerHTML;
        const iconWidth = this.getIconWidth(iconElement);
        const iconHeight = this.getIconHeight(iconElement);
        this.cleanupSVGStyles(iconElement);
        if (iconWidth && iconHeight) iconElement.setAttribute('viewBox', `0 0 ${iconWidth} ${iconHeight}`);
        return initialDiv.innerHTML;
    }
    cleanupSVGStyles(iconElement) {
        iconElement.removeAttribute('style');
        iconElement.removeAttribute('width');
        iconElement.removeAttribute('height');
    }
    getIconWidth(icon) {
        const width = icon.getAttribute('width') ?? '';
        if (numberOrPixelValuePattern.test(width)) return width;
        return null;
    }
    getIconHeight(icon) {
        const height = icon.getAttribute('height') ?? '';
        if (numberOrPixelValuePattern.test(height)) return height;
        return null;
    }
    constructor(...args){
        super(...args), this.closeIcon = images_close, this.openIcon = search, this.isModalOpen = false, this.recommendationsLoaded = false;
    }
}
AtomicIpxButton.styles = css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */:host [part=ipx-button]{bottom:calc(var(--spacing,.25rem)*1);height:var(--atomic-ipx-button-height,2.75rem);padding-inline:calc(var(--spacing,.25rem)*3);position:fixed;right:calc(var(--spacing,.25rem)*12);white-space:nowrap}:host [part=button-icon]{display:inline-block;font-size:100%;height:calc(var(--spacing,.25rem)*4);padding:calc(var(--spacing,.25rem)*0);position:relative;vertical-align:middle;width:calc(var(--spacing,.25rem)*4)}:host [part=button-text]{margin-left:calc(var(--spacing,.25rem)*2);overflow:hidden}:host [part=ipx-close-icon],:host [part=ipx-open-icon]{left:calc(var(--spacing,.25rem)*0);position:absolute;transition:transform .5s}`;
_ts_decorate([
    property({
        type: String,
        reflect: true
    }),
    _ts_metadata("design:type", String)
], AtomicIpxButton.prototype, "label", void 0);
_ts_decorate([
    property({
        type: String,
        reflect: true
    })
], AtomicIpxButton.prototype, "closeIcon", void 0);
_ts_decorate([
    property({
        type: String,
        reflect: true
    })
], AtomicIpxButton.prototype, "openIcon", void 0);
_ts_decorate([
    property({
        type: Boolean,
        reflect: true,
        attribute: 'is-modal-open'
    })
], AtomicIpxButton.prototype, "isModalOpen", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Bindings ? Object : Bindings)
], AtomicIpxButton.prototype, "bindings", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicIpxButton.prototype, "error", void 0);
AtomicIpxButton = _ts_decorate([
    customElement('atomic-ipx-button'),
    bindings(),
    withTailwindStyles
], AtomicIpxButton);
export { AtomicIpxButton };
