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: 'a585e37fe2345bde4a9a518ce954f7d9fd29977d', class: "property-controls" }, h("div", { key: '06fde491dbd15b51cf03ccc08bb6d603175bb80a', class: "property-path" }, h("limebb-property-selector", { key: '1240fdfdbe18b99e3e2eb4b77942ee15fda8f072', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange }), h("div", { key: 'bf589350c3aa36546c76bcf2058e0683793a828a', class: "input-grid" }, this.renderAliasInput()), h("div", { key: '6645baffc12260bd5f84d11d0680af7926a5968b', class: "input-grid" }, this.renderDescriptionInput()), h("div", { key: '0abce87c838dc5c1a28df32f7f34346113a83818', class: "button-group" }, this.renderAliasButton(), this.renderDescriptionButton())), h("limel-icon-button", { key: '011c1c0d537ff368772960528b675d6a191a6be3', 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"
                        }
                    }
                }
            }];
    }
}
