import { __decorate } from "tslib";
import { html } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { UiElement } from "../UiElement.js";
import { isDisabled, setDisabled } from "../lib/disabled.js";
import { ripple } from "../effects/rippleDirective.js";
import '../../define/ui/ui-ripple.js';
export var ListItemLines;
(function (ListItemLines) {
    ListItemLines["one"] = "one";
    ListItemLines["two"] = "two";
    ListItemLines["three"] = "three";
})(ListItemLines || (ListItemLines = {}));
export var ListItemImage;
(function (ListItemImage) {
    ListItemImage["icon"] = "icon";
    ListItemImage["avatar"] = "avatar";
    ListItemImage["image"] = "image";
    ListItemImage["video"] = "video";
    ListItemImage["auto"] = "auto";
})(ListItemImage || (ListItemImage = {}));
/**
 * @slot
 * @slot start
 * @slot end
 * @slot end-text
 * @slot supporting-text
 */
export default class UiListItem extends UiElement {
    /**
     * Whether the chip is disabled. The user can't interact with the chip when `true`.
     * @attribute
     */
    get disabled() {
        return isDisabled(this);
    }
    set disabled(value) {
        const old = isDisabled(this);
        setDisabled(this, value);
        this.requestUpdate('disabled', old);
    }
    constructor() {
        super();
        this.renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
        this.lines = ListItemLines.one;
        this.image = ListItemImage.icon;
        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));
        this.addEventListener('keydown', this.handleKeyDown.bind(this));
        this.addEventListener('keyup', this.handleKeyUp.bind(this));
        this.addEventListener('focus', this.handleFocus.bind(this));
        this.addEventListener('blur', this.handleBlur.bind(this));
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.hasAttribute('role')) {
            this.setAttribute('role', 'listitem');
        }
    }
    handleKeyDown(e) {
        if (e.key !== ' ' && e.key !== 'Enter')
            return;
        e.preventDefault();
        this.beginPress({ positionEvent: e });
    }
    handleKeyUp(e) {
        if (e.key !== ' ' && e.key !== 'Enter')
            return;
        e.preventDefault();
        this.endPress({ cancelled: false, actionData: { item: this } });
    }
    beginPress(options) {
        super.beginPress(options);
        this.ripple.beginPress(options.positionEvent);
    }
    endPress(options) {
        super.endPress(options);
        this.ripple.endPress();
    }
    handlePointerEnter(e) {
        this.ripple.beginHover(e);
    }
    handlePointerLeave(e) {
        super.handlePointerLeave(e);
        this.ripple.endHover();
    }
    handleFocus() {
        this.ripple.beginFocus();
    }
    handleBlur() {
        // if (this.matches(':focus-within')) {
        //   return;
        // }
        this.ripple.endFocus();
    }
    /**
     * Focuses list item and makes list item focusable via keyboard.
     */
    activate() {
        this.setAttribute('tabindex', '0');
        this.focus();
        this.ripple.beginFocus();
    }
    /**
     * Returns true if list item is currently focused and is focusable.
     */
    isActive() {
        return this.getAttribute('tabindex') === '0';
    }
    /**
     * Removes list item from sequential keyboard navigation.
     */
    deactivate() {
        this.removeAttribute('tabindex');
    }
    handleSlotChange() {
        this.requestUpdate();
    }
    render() {
        const { pressed = false } = this;
        const surfaceClasses = classMap({
            surface: true,
            pressed,
        });
        return html `
    <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
      <div class="container"></div>
      <div class="state"></div>
      <div class="content">
        ${this.renderStart()}
        ${this.renderBody()}
        ${this.renderEnd()}
      </div>
      ${this.renderRipple()}
    </div>
    `;
    }
    renderStart() {
        return html `<div class="start">
      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
    </div>`;
    }
    renderEnd() {
        return html `<div class="end">
      <slot name="end" @slotchange=${this.handleSlotChange}></slot>
      <span class="trailing-supporting-text"><slot name="end-text"></slot></span>
    </div>`;
    }
    renderBody() {
        const { lines = ListItemLines.one } = this;
        const hasSupportingText = lines !== ListItemLines.one;
        return html `
    <div class="body">
      <span class="headline"><slot></slot></span>
      ${hasSupportingText ? html `<span class="supporting-text"><slot name="supporting-text"></slot></span>` : ''}
    </div>
    `;
    }
}
__decorate([
    query('ui-ripple')
], UiListItem.prototype, "ripple", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UiListItem.prototype, "disabled", null);
__decorate([
    property({ type: String, reflect: true })
], UiListItem.prototype, "lines", void 0);
__decorate([
    property({ type: String, reflect: true })
], UiListItem.prototype, "image", void 0);
//# sourceMappingURL=UiListItem.js.map