import { h } from "@stencil/core";
/**
 * Response Format Property Item Component
 *
 * Represents a single property selection with optional alias and description
 * Part of the response format editor
 * @private
 */
export class ResponseFormatItem {
    constructor() {
        this.showAliasInput = false;
        this.showDescriptionInput = false;
        this.handlePathChange = (event) => {
            event.stopPropagation();
            this.itemChange.emit(Object.assign(Object.assign({}, this.item), { path: event.detail }));
        };
        this.toggleAliasInput = () => {
            this.showAliasInput = !this.showAliasInput;
        };
        this.toggleDescriptionInput = () => {
            this.showDescriptionInput = !this.showDescriptionInput;
        };
        this.handleAliasChange = (event) => {
            event.stopPropagation();
            const alias = event.detail;
            this.itemChange.emit(Object.assign(Object.assign({}, this.item), { alias: alias || undefined }));
        };
        this.handleDescriptionChange = (event) => {
            event.stopPropagation();
            const description = event.detail;
            this.itemChange.emit(Object.assign(Object.assign({}, this.item), { description: description || undefined }));
        };
        this.handleAliasBlur = () => {
            if (this.item.alias) {
                const trimmed = this.item.alias.trim();
                if (trimmed !== this.item.alias) {
                    this.itemChange.emit(Object.assign(Object.assign({}, this.item), { alias: trimmed || undefined }));
                }
            }
        };
        this.handleDescriptionBlur = () => {
            if (this.item.description) {
                const trimmed = this.item.description.trim();
                if (trimmed !== this.item.description) {
                    this.itemChange.emit(Object.assign(Object.assign({}, this.item), { description: trimmed || undefined }));
                }
            }
        };
        this.handleRemove = () => {
            this.itemChange.emit(null);
        };
    }
    componentWillLoad() {
        // Initialize visibility based on whether fields have values
        this.showAliasInput = !!this.item.alias;
        this.showDescriptionInput = !!this.item.description;
    }
    componentWillUpdate() {
        // Keep inputs visible if they have values
        if (this.item.alias && !this.showAliasInput) {
            this.showAliasInput = true;
        }
        if (this.item.description && !this.showDescriptionInput) {
            this.showDescriptionInput = true;
        }
    }
    render() {
        return [
            h("div", { key: '1fc4a0dbdaa2b362e56a53a82483ca3afe21f6bf', class: "property-controls" }, h("div", { key: '5269250030c559943d4f610734d1ac490a8355ad', class: "property-path" }, h("limebb-property-selector", { key: '2602b66035849922fc413cbc0c82b8163a928ecd', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange }), h("div", { key: '4974a2c7ff30c527b0328d0fbed3b8bac519fdcd', class: "input-grid" }, this.renderAliasInput()), h("div", { key: 'fb058b3a5d5599c387b852e409bd5ac8e8afbc30', class: "input-grid" }, this.renderDescriptionInput()), h("div", { key: '97a5e7e2ed68fdbac160bdd60498541f3a16371d', class: "button-group" }, this.renderAliasButton(), this.renderDescriptionButton())), h("limel-icon-button", { key: '42ab29e5e8e5fc08e90bc4afe6c6d504e434d33e', icon: "trash", label: "Remove property", onClick: this.handleRemove })),
        ];
    }
    renderAliasButton() {
        if (this.showAliasInput) {
            return;
        }
        return (h("button", { type: "button", class: "alias", onClick: this.toggleAliasInput }, "+ Alias"));
    }
    renderDescriptionButton() {
        if (this.showDescriptionInput) {
            return;
        }
        return (h("button", { type: "button", class: "description", onClick: this.toggleDescriptionInput }, "+ Description"));
    }
    renderAliasInput() {
        if (!this.showAliasInput) {
            return;
        }
        return (h("div", { class: "input-group" }, h("limel-input-field", { label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur, leadingIcon: "add_tag" }), h("limel-icon-button", { class: "remove-alias", icon: "multiply", onClick: this.toggleAliasInput, label: "Remove alias", disabled: !!this.item.alias })));
    }
    renderDescriptionInput() {
        if (!this.showDescriptionInput) {
            return;
        }
        return (h("div", { class: "input-group" }, h("limel-input-field", { label: "Description", value: this.item.description || '', placeholder: "Describe this property for AI...", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur, leadingIcon: "comments" }), h("limel-icon-button", { class: "remove-description", icon: "multiply", onClick: this.toggleDescriptionInput, label: "Remove description", disabled: !!this.item.description })));
    }
    static get is() { return "limebb-lime-query-response-format-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["response-format-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["response-format-item.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"
            },
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "PropertySelectionItem",
                    "resolved": "PropertySelectionItem",
                    "references": {
                        "PropertySelectionItem": {
                            "location": "import",
                            "path": "../property-selection-format",
                            "id": "src/components/lime-query-builder/property-selection-format.ts::PropertySelectionItem",
                            "referenceLocation": "PropertySelectionItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The property selection item"
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "showAliasInput": {},
            "showDescriptionInput": {}
        };
    }
    static get events() {
        return [{
                "method": "itemChange",
                "name": "itemChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the item changes"
                },
                "complexType": {
                    "original": "PropertySelectionItem | null",
                    "resolved": "PropertySelectionItem | null",
                    "references": {
                        "PropertySelectionItem": {
                            "location": "import",
                            "path": "../property-selection-format",
                            "id": "src/components/lime-query-builder/property-selection-format.ts::PropertySelectionItem",
                            "referenceLocation": "PropertySelectionItem"
                        }
                    }
                }
            }];
    }
}
