import { __decorate } from "tslib";
import { attr } from '@ni/fast-element';
import { DesignSystem, isTreeItemElement, TreeItem as FoundationTreeItem } from '@ni/fast-foundation';
import { keyArrowLeft, keyEnter } from '@ni/fast-web-utilities';
import { AnchorBase } from '../anchor-base';
import { styles } from './styles';
import { template } from './template';
/**
 * A nimble-styled anchor tree item
 */
export class AnchorTreeItem extends AnchorBase {
    constructor() {
        super(...arguments);
        /**
         * When true, the control will appear selected by user interaction.
         * @public
         * @remarks
         * HTML Attribute: selected
         */
        this.selected = false;
        /**
         * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
         * @public
         * @remarks
         * HTML Attribute: disabled
         */
        this.disabled = false;
    }
    /**
     * Whether the tree is nested
     *
     * @public
     */
    isNestedItem() {
        return isTreeItemElement(this.parentElement);
    }
    /**
     * Handle focus events
     *
     * @internal
     */
    handleFocus(_e) {
        this.setAttribute('tabindex', '0');
    }
    /**
     * Handle blur events
     *
     * @internal
     */
    handleBlur(_e) {
        this.setAttribute('tabindex', '-1');
    }
    /**
     * @internal
     */
    keydownHandler(e) {
        if (e.defaultPrevented) {
            return false;
        }
        switch (e.key) {
            case keyEnter:
                // Do not let the event bubble up to the FAST tree, or it will
                // prevent the default action.
                e.stopPropagation();
                break;
            case keyArrowLeft:
                // For FAST tree items, the FAST tree view handles this navigation,
                // but since our anchor tree item is not "instanceof FASTTreeItem",
                // the FAST tree view won't do this for us. We do it ourselves.
                if (this.parentElement && this.isNestedItem()) {
                    FoundationTreeItem.focusItem(this.parentElement);
                }
                break;
            default:
        }
        return true;
    }
    /**
     * Activating the anchor by pressing the Enter key results in a click event.
     * This bubbles up to the Nimble tree-view's click handler, causing the tree item
     * to be selected. We don't want that for anchor tree items. We'll stop propagation
     * of the event to prevent that.
     * @internal
     */
    clickHandler(e) {
        if (e.defaultPrevented) {
            return false;
        }
        e.stopPropagation();
        return true;
    }
    selectedChanged(_prev, _next) {
        if (this.$fastController.isConnected) {
            this.$emit('selected-change', this);
        }
    }
}
__decorate([
    attr({ mode: 'boolean' })
], AnchorTreeItem.prototype, "selected", void 0);
__decorate([
    attr({ mode: 'boolean' })
], AnchorTreeItem.prototype, "disabled", void 0);
// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
const nimbleAnchorTreeItem = AnchorTreeItem.compose({
    baseName: 'anchor-tree-item',
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true
    }
});
DesignSystem.getOrCreate()
    .withPrefix('nimble')
    .register(nimbleAnchorTreeItem());
export const anchorTreeItemTag = 'nimble-anchor-tree-item';
//# sourceMappingURL=index.js.map