import { h, } from "@stencil/core";
import classNames from "classnames";
export class ActionListItem {
    host;
    /**
     * The title text displayed in the item
     */
    itemTitle;
    /**
     * The description text displayed below the title
     */
    description;
    /**
     * Value associated with this item
     */
    value;
    /**
     * URL to navigate to when item is clicked
     */
    href;
    /**
     * Target for the link navigation
     * @default '_self'
     */
    target = "_self";
    /**
     * Controls whether the item is disabled
     * @default false
     */
    disabled = false;
    /**
     * Aria label for accessibility support
     */
    itemAriaLabel;
    /**
     * Event emitted when the main item area is clicked
     */
    ifxActionListItemClick;
    onDisabledChange() {
        // Update interactive elements when disabled state changes
        this.updateSlotElementsDisabledState();
    }
    handleMainClick = (event) => {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        // Check if clicked element is inside leading or trailing areas
        const leadingElement = this.host.shadowRoot?.querySelector(".action-list-item__leading");
        const trailingElement = this.host.shadowRoot?.querySelector(".action-list-item__trailing");
        if (leadingElement?.contains(event.target) ||
            trailingElement?.contains(event.target)) {
            return; // Don't trigger main click if clicking on leading/trailing areas
        }
        // Always emit main event when clicking on content area (text), regardless of interactive elements
        this.ifxActionListItemClick.emit({
            value: this.value,
            href: this.href,
            target: this.target,
            component: this,
        });
        // If href is provided, automatically navigate (Link mode)
        // If no href is provided, only the event is emitted (Event mode)
        if (this.href) {
            if (this.target === "_blank") {
                window.open(this.href, this.target);
            }
            else {
                window.location.href = this.href;
            }
        }
    };
    handleLeadingClick = (event) => {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        const target = event.target;
        // Check if the clicked element or any of its parents is an interactive component
        let currentElement = target;
        while (currentElement && currentElement !== this.host) {
            if (this.isInteractiveElement(currentElement)) {
                // Interactive element clicked - stop propagation to prevent main event
                event.stopPropagation();
                return;
            }
            currentElement = currentElement.parentElement;
        }
        // Non-interactive element clicked - trigger main action
        event.stopPropagation();
        this.ifxActionListItemClick.emit({
            value: this.value,
            href: this.href,
            target: this.target,
            component: this,
        });
        // If href is provided, automatically navigate
        if (this.href) {
            if (this.target === "_blank") {
                window.open(this.href, this.target);
            }
            else {
                window.location.href = this.href;
            }
        }
    };
    handleTrailingClick = (event) => {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        const target = event.target;
        // Check if the clicked element or any of its parents is an interactive component
        let currentElement = target;
        while (currentElement && currentElement !== this.host) {
            if (this.isInteractiveElement(currentElement)) {
                // Interactive element clicked - stop propagation to prevent main event
                event.stopPropagation();
                return;
            }
            currentElement = currentElement.parentElement;
        }
        // Non-interactive element clicked - trigger main action
        event.stopPropagation();
        this.ifxActionListItemClick.emit({
            value: this.value,
            href: this.href,
            target: this.target,
            component: this,
        });
        // If href is provided, automatically navigate
        if (this.href) {
            if (this.target === "_blank") {
                window.open(this.href, this.target);
            }
            else {
                window.location.href = this.href;
            }
        }
    };
    isInteractiveElement = (element) => {
        // Get the tag name, handling both custom elements and standard HTML
        const tagName = element.tagName.toUpperCase();
        // List of Infineon components that should block main event
        const interactiveInfineonComponents = [
            "IFX-BUTTON",
            "IFX-CHECKBOX",
            "IFX-SWITCH",
        ];
        // Check if it's an interactive Infineon component
        return interactiveInfineonComponents.includes(tagName);
    };
    handleMainKeyDown = (event) => {
        if (this.disabled)
            return;
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            // Always trigger main action via keyboard, regardless of interactive elements
            this.handleMainClick(event);
        }
    };
    handleLeadingKeyDown = (event) => {
        if (this.disabled)
            return;
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            const leadingSlot = this.host.shadowRoot?.querySelector('slot[name="leading"]');
            const assignedElements = leadingSlot?.assignedElements() || [];
            // Find first interactive element and activate it
            const firstInteractive = assignedElements.find((el) => this.isInteractiveElement(el));
            if (firstInteractive) {
                firstInteractive.focus();
                firstInteractive.click();
            }
        }
    };
    handleTrailingKeyDown = (event) => {
        if (this.disabled)
            return;
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            const trailingSlot = this.host.shadowRoot?.querySelector('slot[name="trailing"]');
            const assignedElements = trailingSlot?.assignedElements() || [];
            // Find first interactive element and activate it
            const firstInteractive = assignedElements.find((el) => this.isInteractiveElement(el));
            if (firstInteractive) {
                firstInteractive.focus();
                firstInteractive.click();
            }
        }
    };
    hasSlotContent(slotName) {
        const slot = this.host.querySelector(`[slot="${slotName}"]`);
        return !!slot;
    }
    componentDidLoad() {
        // Apply disabled state to interactive elements in slots
        this.updateSlotElementsDisabledState();
    }
    componentDidUpdate() {
        // Apply disabled state to interactive elements in slots when disabled prop changes
        this.updateSlotElementsDisabledState();
    }
    updateSlotElementsDisabledState = () => {
        // Only handle interactive components that should be disabled
        const interactiveComponents = ["ifx-checkbox", "ifx-switch", "ifx-button"];
        // Get all slotted elements
        const slots = this.host.querySelectorAll("[slot]");
        slots.forEach((slottedElement) => {
            // Check if the slotted element itself is an interactive component
            if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {
                this.setElementDisabledState(slottedElement);
            }
            // Also check for nested interactive components within the slotted element
            interactiveComponents.forEach((componentTag) => {
                const nestedElements = slottedElement.querySelectorAll(componentTag);
                nestedElements.forEach((nestedElement) => {
                    this.setElementDisabledState(nestedElement);
                });
            });
        });
    };
    setElementDisabledState = (element) => {
        if (this.disabled) {
            element.setAttribute("disabled", "true");
        }
        else {
            element.removeAttribute("disabled");
        }
    };
    render() {
        const isClickable = !this.disabled && (this.href || this.value);
        const ariaLabel = this.itemAriaLabel ||
            `${this.itemTitle}${this.description ? ` - ${this.description}` : ""}`;
        const hasLeadingContent = this.hasSlotContent("leading");
        const hasTrailingContent = this.hasSlotContent("trailing");
        return (h("div", { key: '443e561a3a30f25d2b9a21f47ed2e0b7eac894a9', class: classNames("action-list-item", this.disabled && "action-list-item--disabled", isClickable && "action-list-item--clickable"), role: "listitem", tabIndex: isClickable ? 0 : -1, "aria-label": ariaLabel, "aria-disabled": this.disabled ? "true" : undefined, onClick: this.handleMainClick, onKeyDown: this.handleMainKeyDown }, hasLeadingContent && (h("div", { key: 'b297863d7fe76fd8682e18f299b1c49cdf5b82a4', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, h("slot", { key: '0f65e4f44b14c138e0d234104d8175a0acfe9cc0', name: "leading" }))), h("div", { key: '1d324432cfc595f4bfbe30dcbf26f240c40a3e89', class: "action-list-item__content" }, h("div", { key: '9473e08be2b90322f3aa8759356b8c964da3e435', class: "action-list-item__title" }, this.itemTitle), this.description && (h("div", { key: '926cf7b7e8a6a1afb214139eba706b967ef9932b', class: "action-list-item__description" }, this.description))), hasTrailingContent && (h("div", { key: '0b5d67c6e09d74b21b0b831746aae4e12ee8a6c6', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, h("slot", { key: '8b0dd89f53cec9a72e0486d5d2c534f88d24b79a', name: "trailing" })))));
    }
    static get is() { return "ifx-action-list-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["action-list-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["action-list-item.css"]
        };
    }
    static get properties() {
        return {
            "itemTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The title text displayed in the item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "item-title"
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The description text displayed below the title"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "description"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Value associated with this item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "URL to navigate to when item is clicked"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'_self'"
                        }],
                    "text": "Target for the link navigation"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "\"_self\""
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Controls whether the item is disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "itemAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Aria label for accessibility support"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "item-aria-label"
            }
        };
    }
    static get events() {
        return [{
                "method": "ifxActionListItemClick",
                "name": "ifxActionListItemClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the main item area is clicked"
                },
                "complexType": {
                    "original": "ActionListItemClickEvent",
                    "resolved": "ActionListItemClickEvent",
                    "references": {
                        "ActionListItemClickEvent": {
                            "location": "local",
                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/action-list/action-list-item.tsx",
                            "id": "src/components/action-list/action-list-item.tsx::ActionListItemClickEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "onDisabledChange"
            }];
    }
}
//# sourceMappingURL=action-list-item.js.map
