import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { bindingGuard } from "../../../decorators/binding-guard.js";
import { bindings } from "../../../decorators/bindings.js";
import { errorGuard } from "../../../decorators/error-guard.js";
import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin.js";
import arrow_down from "../../../images/arrow-down.js";
import "../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);
}
class AtomicSmartSnippetCollapseWrapper extends InitializeBindingsMixin(LitElement) {
    connectedCallback() {
        super.connectedCallback();
        this.shouldRenderButton = !!this.maximumHeight;
        if (this.shouldRenderButton) this.classList.add('invisible');
    }
    initialize() {
        this.validateProps();
    }
    validateProps() {
        if (this.maximumHeight && (!this.collapsedHeight || this.maximumHeight < this.collapsedHeight)) throw new Error('snippetMaximumHeight must be equal or greater than snippetCollapsedHeight');
    }
    initializeFullHeight() {
        this.fullHeight = this.getBoundingClientRect().height;
        this.showButton = this.fullHeight > this.maximumHeight;
        this.isExpanded = !this.showButton;
        this.style.setProperty('--collapsed-size', `${this.collapsedHeight}px`);
    }
    toggleExpanded() {
        this.isExpanded = !this.isExpanded;
    }
    renderButton() {
        if (!this.showButton) return nothing;
        return html`
      <button
        @click=${this.toggleExpanded}
        class=${multiClassMap(tw({
            'text-primary mb-4 hover:underline': true
        }))}
        part=${this.isExpanded ? 'show-less-button' : 'show-more-button'}
      >
        ${this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}
        <atomic-icon
          .icon=${arrow_down}
          class=${multiClassMap(tw({
            'ml-2 w-3 align-baseline': true
        }))}
        ></atomic-icon>
      </button>
    `;
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (void 0 === this.fullHeight && this.shouldRenderButton) this.initializeFullHeight();
        const isExpanded = this.isExpanded && (!!this.fullHeight || !this.shouldRenderButton);
        const isInvisible = !this.fullHeight && this.shouldRenderButton;
        this.classList.toggle('expanded', isExpanded);
        this.classList.toggle('invisible', isInvisible);
    }
    render() {
        return html`
      <div
        part="smart-snippet-collapse-wrapper"
        class="block overflow-hidden text-lg text-on-background smart-snippet-content"
      >
        <slot></slot>
      </div>
      ${when(this.shouldRenderButton, ()=>this.renderButton())}
    `;
    }
    constructor(...args){
        super(...args), this.isExpanded = true, this.showButton = true, this.shouldRenderButton = false;
    }
}
AtomicSmartSnippetCollapseWrapper.styles = css`:host{display:block}:host(.invisible){visibility:hidden}.smart-snippet-content{height:auto;max-height:var(--collapsed-size);transition:max-height 2s cubic-bezier(0,1,.16,1) -1.82s;--gradient-start:var(
        --atomic-smart-snippet-gradient-start,calc(max(var(--collapsed-size) - (var(--line-height) * 1.5),
            var(--collapsed-size) * 0.5))
      );mask-image:linear-gradient(#000,#000 var(--gradient-start),transparent 100%)}:host(.expanded) .smart-snippet-content{height:auto;mask-image:none;max-height:9999999px;transition:max-height 2s cubic-bezier(1,0,1,0) 0s}:host(.expanded) button atomic-icon{transform:scaleY(-1)}`;
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Bindings ? Object : Bindings)
], AtomicSmartSnippetCollapseWrapper.prototype, "bindings", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicSmartSnippetCollapseWrapper.prototype, "error", void 0);
_ts_decorate([
    property({
        type: Number,
        reflect: true,
        attribute: 'maximum-height'
    }),
    _ts_metadata("design:type", Number)
], AtomicSmartSnippetCollapseWrapper.prototype, "maximumHeight", void 0);
_ts_decorate([
    property({
        type: Number,
        reflect: true,
        attribute: 'collapsed-height'
    }),
    _ts_metadata("design:type", Number)
], AtomicSmartSnippetCollapseWrapper.prototype, "collapsedHeight", void 0);
_ts_decorate([
    state()
], AtomicSmartSnippetCollapseWrapper.prototype, "isExpanded", void 0);
_ts_decorate([
    state()
], AtomicSmartSnippetCollapseWrapper.prototype, "showButton", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", Number)
], AtomicSmartSnippetCollapseWrapper.prototype, "fullHeight", void 0);
_ts_decorate([
    errorGuard(),
    bindingGuard(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicSmartSnippetCollapseWrapper.prototype, "render", null);
AtomicSmartSnippetCollapseWrapper = _ts_decorate([
    customElement('atomic-smart-snippet-collapse-wrapper'),
    bindings(),
    withTailwindStyles
], AtomicSmartSnippetCollapseWrapper);
export { AtomicSmartSnippetCollapseWrapper };
