import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import ScrollBooster from 'scrollbooster';
import { longpressable } from '@operato/utils';
import { GroupBarStyles } from './group-bar-styles';
let PlayGroupBar = class PlayGroupBar extends LitElement {
    constructor() {
        super(...arguments);
        this.groups = [];
        this.groupId = '';
        this.targetPage = '';
    }
    render() {
        return html `
      <ul>
        ${(this.groups || []).map(group => html `
            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>
              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
            </li>
          `)}

        <li padding>&nbsp;</li>

        <li add>
          <md-icon @click=${e => this._infoGroup()}>add</md-icon>
        </li>
      </ul>
    `;
    }
    _infoGroup(group) {
        this.dispatchEvent(new CustomEvent('info-play-group', {
            detail: group
        }));
    }
    _onWheelEvent(e) {
        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
        this.scrollLeft -= delta * 40;
        e.preventDefault();
    }
    _onClickAdd(e) {
        // TODO Implements
    }
    updated(change) {
        if (change.has('groups')) {
            /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
            this.__sb && this.__sb.updateMetrics();
        }
        if (change.has('groupId')) {
            var active = this.renderRoot.querySelector('li[active]');
            active && active.scrollIntoView();
        }
    }
    firstUpdated() {
        var scrollTarget = this.renderRoot.querySelector('ul');
        /* long-press */
        longpressable(scrollTarget);
        scrollTarget.addEventListener('mousewheel', this._onWheelEvent.bind(this), false);
        this.__sb = new ScrollBooster({
            viewport: this,
            content: scrollTarget,
            mode: 'x',
            onUpdate: data => {
                this.scrollLeft = data.position.x;
            }
        });
    }
};
PlayGroupBar.styles = [GroupBarStyles];
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], PlayGroupBar.prototype, "groups", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], PlayGroupBar.prototype, "groupId", void 0);
__decorate([
    property({ type: String, attribute: 'target-page' }),
    __metadata("design:type", String)
], PlayGroupBar.prototype, "targetPage", void 0);
PlayGroupBar = __decorate([
    customElement('play-group-bar')
], PlayGroupBar);
export default PlayGroupBar;
//# sourceMappingURL=play-group-bar.js.map