import { h, Host, } from "@stencil/core";
/**
 * Order By Editor Component
 *
 * Allows users to specify the order in which query results should be sorted.
 * Supports sorting by multiple properties with ascending or descending order.
 *
 * Features:
 * - **Property selection**: Choose properties using dropdown navigation
 * - **Sort direction**: Toggle between ascending (ASC) and descending (DESC)
 * - **Multiple sort fields**: Add multiple properties to create complex sorting
 * - **Order matters**: Properties are sorted in the order they appear in the list
 * - **Dynamic list**: Add/remove sort fields
 *
 * The component generates an `OrderByItem[]` array where each item specifies
 * a property path and sort direction.
 *
 * @private
 */
export class OrderByEditor {
    constructor() {
        /**
         * Optional label
         */
        this.label = 'Sort Order';
        this.items = [];
        this.handleItemChange = (index) => (event) => {
            event.stopPropagation();
            const newItems = [...this.items];
            if (event.detail === null) {
                // Remove item
                newItems.splice(index, 1);
            }
            else {
                // Update item
                newItems[index] = event.detail;
            }
            this.items = newItems;
            this.emitChange();
        };
        this.handleAddSortField = () => {
            // Add new item with empty path and ASC direction
            this.items = [...this.items, { '': 'ASC' }];
            this.emitChange();
        };
    }
    componentWillLoad() {
        if (this.value && this.value.length > 0) {
            this.items = [...this.value];
        }
    }
    handleValueChange(newValue) {
        if (!newValue) {
            return;
        }
        // Check if items have changed
        const itemsChanged = newValue.length !== this.items.length ||
            !newValue.every((item, index) => {
                const currentItem = this.items[index];
                if (!currentItem)
                    return false;
                const itemKey = Object.keys(item)[0];
                const currentKey = Object.keys(currentItem)[0];
                return (itemKey === currentKey &&
                    item[itemKey] === currentItem[currentKey]);
            });
        if (itemsChanged) {
            this.items = newValue.length > 0 ? [...newValue] : [];
        }
    }
    render() {
        return (h(Host, { key: '6ef5ee3cf7b67cc0f821272f9d552eab48b60065' }, this.renderEmptyState(), this.renderOrderByEditor()));
    }
    renderEmptyState() {
        if (this.limetype) {
            return null;
        }
        return (h("div", { class: "empty-state" }, h("p", null, "Select a limetype to configure sorting")));
    }
    renderOrderByEditor() {
        if (!this.limetype) {
            return null;
        }
        return [
            this.renderHeader(),
            this.renderOrderByList(),
            this.renderActions(),
        ];
    }
    renderHeader() {
        return (h("limel-header", { class: "is-narrow", heading: this.label, icon: "sorting_arrows" }));
    }
    renderOrderByList() {
        if (this.items.length === 0) {
            return null;
        }
        return (h("div", { class: "order-by-list" }, this.items.map((item, index) => this.renderItem(item, index))));
    }
    renderActions() {
        return (h("limel-button", { label: "Add Sort Field", icon: "plus_math", onClick: this.handleAddSortField }));
    }
    renderItem(item, index) {
        const propertyPath = Object.keys(item)[0] || '';
        return (h("limebb-lime-query-order-by-item", { key: `${propertyPath}-${index}`, class: "order-by-item", platform: this.platform, context: this.context, limetype: this.limetype, item: item, onItemChange: this.handleItemChange(index) }));
    }
    emitChange() {
        this.change.emit(this.items);
    }
    static get is() { return "limebb-lime-query-order-by-editor"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["order-by-editor.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["order-by-editor.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Platform service provider"
                },
                "getter": false,
                "setter": false
            },
            "context": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentContext",
                    "resolved": "LimeWebComponentContext",
                    "references": {
                        "LimeWebComponentContext": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentContext",
                            "referenceLocation": "LimeWebComponentContext"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Component context"
                },
                "getter": false,
                "setter": false
            },
            "limetype": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The limetype to select properties from"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "limetype"
            },
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "OrderByItem[]",
                    "resolved": "OrderByItem[] | undefined",
                    "references": {
                        "OrderByItem": {
                            "location": "import",
                            "path": "../lime-query.types",
                            "id": "src/components/lime-query-builder/lime-query.types.ts::OrderByItem",
                            "referenceLocation": "OrderByItem"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Current order by specification"
                },
                "getter": false,
                "setter": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Optional label"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "'Sort Order'"
            }
        };
    }
    static get states() {
        return {
            "items": {}
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the order by specification changes"
                },
                "complexType": {
                    "original": "OrderByItem[]",
                    "resolved": "OrderByItem[]",
                    "references": {
                        "OrderByItem": {
                            "location": "import",
                            "path": "../lime-query.types",
                            "id": "src/components/lime-query-builder/lime-query.types.ts::OrderByItem",
                            "referenceLocation": "OrderByItem"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
}
