import { h } from "@stencil/core";
import classNames from "classnames";
export class ActionListItem {
    constructor() {
        /**
         * Target for the link navigation
         * @default '_self'
         */
        this.target = '_self';
        /**
         * Controls whether the item is disabled
         * @default false
         */
        this.disabled = false;
        this.handleMainClick = (event) => {
            var _a, _b;
            if (this.disabled) {
                event.preventDefault();
                event.stopPropagation();
                return;
            }
            // Check if clicked element is inside leading or trailing areas
            const leadingElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.action-list-item__leading');
            const trailingElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.action-list-item__trailing');
            if ((leadingElement === null || leadingElement === void 0 ? void 0 : leadingElement.contains(event.target)) || (trailingElement === null || trailingElement === void 0 ? void 0 : 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;
                }
            }
        };
        this.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;
                }
            }
        };
        this.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;
                }
            }
        };
        this.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);
        };
        this.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);
            }
        };
        this.handleLeadingKeyDown = (event) => {
            var _a;
            if (this.disabled)
                return;
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                const leadingSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="leading"]');
                const assignedElements = (leadingSlot === null || leadingSlot === void 0 ? void 0 : leadingSlot.assignedElements()) || [];
                // Find first interactive element and activate it
                const firstInteractive = assignedElements.find(el => this.isInteractiveElement(el));
                if (firstInteractive) {
                    firstInteractive.focus();
                    firstInteractive.click();
                }
            }
        };
        this.handleTrailingKeyDown = (event) => {
            var _a;
            if (this.disabled)
                return;
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                const trailingSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trailing"]');
                const assignedElements = (trailingSlot === null || trailingSlot === void 0 ? void 0 : trailingSlot.assignedElements()) || [];
                // Find first interactive element and activate it
                const firstInteractive = assignedElements.find(el => this.isInteractiveElement(el));
                if (firstInteractive) {
                    firstInteractive.focus();
                    firstInteractive.click();
                }
            }
        };
        this.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);
                    });
                });
            });
        };
        this.setElementDisabledState = (element) => {
            if (this.disabled) {
                element.setAttribute('disabled', 'true');
            }
            else {
                element.removeAttribute('disabled');
            }
        };
    }
    onDisabledChange() {
        // Update interactive elements when disabled state changes
        this.updateSlotElementsDisabledState();
    }
    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();
    }
    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: 'afc03036455ceb23a99e893ebdc36c052fcc2e64', 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: 'fbc09a625f124bdcf9137cde295838592925cc93', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, h("slot", { key: '915fb5467635e391ca3713def64ee031095e784d', name: "leading" }))), h("div", { key: '589bd17dcd1f2de8ac7ac1c86db677c9b8eac35e', class: "action-list-item__content" }, h("div", { key: '4b0ac3d7e1439cbe8682f9d14411acc4683b2ffe', class: "action-list-item__title" }, this.itemTitle), this.description && (h("div", { key: 'e5a0481505f637db1f7672fca5e1800a934d4270', class: "action-list-item__description" }, this.description))), hasTrailingContent && (h("div", { key: 'c855aff75b5e1ddba37456c2225f46be3ae17429', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, h("slot", { key: '68ff1e04f0bdf90894fa729619c7b7a6f896bad8', 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",
                "attribute": "item-title",
                "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
            },
            "description": {
                "type": "string",
                "attribute": "description",
                "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
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "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
            },
            "href": {
                "type": "string",
                "attribute": "href",
                "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
            },
            "target": {
                "type": "string",
                "attribute": "target",
                "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,
                "defaultValue": "'_self'"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "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,
                "defaultValue": "false"
            },
            "itemAriaLabel": {
                "type": "string",
                "attribute": "item-aria-label",
                "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
            }
        };
    }
    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
