import { __decorate } from "tslib";
import { html, nothing } from "lit";
import { property, queryAsync, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { when } from "lit/directives/when.js";
import { ripple } from "../effects/rippleDirective.js";
import { isDisabled, setDisabled } from "../lib/disabled.js";
import { UiElement } from "../UiElement.js";
import { Easing } from "../motion/animation.js";
import '../../define/ui/ui-ripple.js';
export default class UiTab extends UiElement {
    get disabled() {
        return isDisabled(this);
    }
    /**
     * When set, the button is a disabled state.
     * @attribute
     */
    set disabled(value) {
        const old = isDisabled(this);
        setDisabled(this, value);
        this.requestUpdate('disabled', old);
    }
    constructor() {
        super();
        /**
         * Whether the tab is selected. Note, this does not correspond to the `selected` state
         * in the `ui-tabs`. This is only to render the tab in the selected state.
         * @attribute
         */
        this.selected = false;
        /**
         * @attribute
         */
        this.priority = 'primary';
        /**
         * @attribute
         */
        this.indicated = false;
        this.hasIcon = false;
        this.showRipple = false;
        this.getRipple = () => {
            this.showRipple = true;
            return this.ripple;
        };
        this.renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
        this.actionController.cancelKeyboardEvents = true;
        this.addEventListener('keydown', this.handleKeyDown.bind(this));
        this.addEventListener('keyup', this.handleKeyUp.bind(this));
        this.addEventListener('click', this.handleClick.bind(this));
        this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
        this.addEventListener('pointerup', this.handlePointerUp.bind(this));
        this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
        this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
        this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.hasAttribute('role')) {
            this.setAttribute('role', 'tab');
        }
        if (!this.hasAttribute('aria-selected')) {
            this.setAttribute('aria-selected', 'false');
        }
    }
    endPress(config) {
        super.endPress(config);
        const { cancelled, reason } = config;
        if (cancelled) {
            return;
        }
        if (reason === 'enter' || reason === 'space') {
            this.click();
        }
    }
    /**
     * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
     */
    handleIconChange(e) {
        const slot = e.target;
        this.hasIcon = !!slot.assignedNodes().length;
    }
    /**
     * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
     */
    highlight() {
        if (!this.indicated) {
            return;
        }
        const pointer = this.shadowRoot?.querySelector('.pointer');
        if (!pointer) {
            return;
        }
        const frames = [
            {
                width: `40px`,
            },
            {
                width: `80px`,
            },
            {
                width: `40px`,
            }
        ];
        pointer.animate(frames, {
            duration: 360,
            iterations: 1,
            easing: Easing.STANDARD,
        });
    }
    render() {
        const { pressed = false } = this;
        const containerClasses = classMap({
            surface: true,
            withIcon: this.hasIcon,
            pressed,
        });
        return html `
    <div class="${containerClasses}" ${ripple(this.getRipple)}>
      <div class="container"></div>
      ${when(this.showRipple, this.renderRipple)}
      <div class="content">
        ${this.renderIcon()}
        <div class="tab-content"><slot></slot></div>
      </div>
      ${this.renderIndicator()}
    </div>
    `;
    }
    renderIcon() {
        return html `
    <div class="icon">
      <slot name="icon" @slotchange="${this.handleIconChange}"></slot>
    </div>
    `;
    }
    renderIndicator() {
        const { indicated, priority } = this;
        if (!indicated) {
            return nothing;
        }
        const classes = {
            indicator: true,
            primary: priority === 'primary',
        };
        return html `<div class="${classMap(classes)}">
      <span role="presentation" class="pointer"></span>
    </div>`;
    }
}
__decorate([
    property({ reflect: true, type: Boolean })
], UiTab.prototype, "disabled", null);
__decorate([
    property({ reflect: true, type: Boolean })
], UiTab.prototype, "selected", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], UiTab.prototype, "priority", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], UiTab.prototype, "indicated", void 0);
__decorate([
    state()
], UiTab.prototype, "hasIcon", void 0);
__decorate([
    state()
], UiTab.prototype, "showRipple", void 0);
__decorate([
    queryAsync('ui-ripple')
], UiTab.prototype, "ripple", void 0);
//# sourceMappingURL=UiTab.js.map