import { LitElement, css, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { createResultContextController } from "../result-template-component-utils/context/result-context-controller.js";
import { bindings } from "../../../decorators/bindings.js";
import { LightDomMixin } from "../../../mixins/light-dom.js";
import { SlotsForNoShadowDOMMixin } from "../../../mixins/slots-for-no-shadow-dom-mixin.js";
import "../atomic-result-text/atomic-result-text.js";
import { bindingGuard } from "../../../decorators/binding-guard.js";
import { errorGuard } from "../../../decorators/error-guard.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 AtomicResultFieldsList extends LightDomMixin(SlotsForNoShadowDOMMixin(LitElement)) {
    connectedCallback() {
        super.connectedCallback();
        if (window.ResizeObserver && this.parentElement) {
            this.resizeObserver = new ResizeObserver(()=>this.updateLayout());
            this.resizeObserver.observe(this.parentElement);
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.resizeObserver?.disconnect();
    }
    initialize() {
        if (!this.result && this.resultController.item) {
            const item = this.resultController.item;
            if ('result' in item) this.result = item.result;
            else this.result = item;
        }
    }
    updated(_changedProperties) {
        super.updated(_changedProperties);
        this.updateLayout();
    }
    updateLayout() {
        if (this.updatingChildren) return;
        this.updatingChildren = true;
        this.showDividers();
        this.showChildren();
        this.hideChildrenToFit();
        this.hideDividersAtEndOfRows();
        this.updatingChildren = false;
    }
    get hostChildren() {
        return Array.from(this.children);
    }
    get isOverflowing() {
        return this.scrollWidth > this.clientWidth || this.scrollHeight > this.clientHeight;
    }
    getSortedChildrenBySize() {
        return this.hostChildren.sort((a, b)=>a.offsetWidth - b.offsetWidth);
    }
    hide(element) {
        element.style.display = 'none';
    }
    show(element) {
        element.style.display = '';
    }
    isChildHidden(element) {
        return 'none' === element.style.display;
    }
    setHideDivider(element, hideDivider) {
        element.classList.toggle('hide-divider', hideDivider);
    }
    showChildren() {
        this.hostChildren.forEach((child)=>this.show(child));
    }
    showDividers() {
        this.hostChildren.forEach((child)=>this.setHideDivider(child, false));
    }
    hideChildrenToFit() {
        const children = this.getSortedChildrenBySize();
        for(let i = children.length - 1; this.isOverflowing && i >= 0; i--)this.hide(children[i]);
    }
    hideDividersAtEndOfRows() {
        this.rows = [];
        let previousChild = null;
        this.hostChildren.filter((child)=>!this.isChildHidden(child)).forEach((child)=>{
            const row = child.offsetTop;
            if (-1 === this.rows.indexOf(row)) {
                this.rows.push(row);
                if (previousChild) this.setHideDivider(previousChild, true);
            }
            previousChild = child;
        });
        if (previousChild) this.setHideDivider(previousChild, true);
    }
    render() {
        return html`${this.renderDefaultSlotContent()}`;
    }
    constructor(...args){
        super(...args), this.resultController = createResultContextController(this), this.updatingChildren = false, this.rows = [];
    }
}
AtomicResultFieldsList.styles = css`atomic-result-fields-list{display:flex;flex-wrap:wrap;height:100%;width:100%}atomic-result-fields-list>:after{background-color:var(--atomic-neutral);content:" ";display:block;height:1rem;margin:0 1rem;vertical-align:middle;width:1px}atomic-result-fields-list>.hide-divider:after{visibility:hidden}`;
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Bindings ? Object : Bindings)
], AtomicResultFieldsList.prototype, "bindings", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicResultFieldsList.prototype, "error", void 0);
_ts_decorate([
    state(),
    _ts_metadata("design:type", Object)
], AtomicResultFieldsList.prototype, "result", void 0);
_ts_decorate([
    bindingGuard(),
    errorGuard(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicResultFieldsList.prototype, "render", null);
AtomicResultFieldsList = _ts_decorate([
    customElement('atomic-result-fields-list'),
    bindings()
], AtomicResultFieldsList);
export { AtomicResultFieldsList };
