import { __decorate } from "tslib";
import { html } from "lit";
import { property, query, queryAssignedElements } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { Button } from "./Button.js";
import { ripple } from "../effects/rippleDirective.js";
import '../../define/ui/ui-ripple.js';
import { check } from "../icons/Icons.js";
/**
 * @fires trigger - When a button is triggered.
 * @slot - Default slot for the label
 * @slot icon - A slot to render an icon.
 */
export default class SegmentedButton extends Button {
    constructor() {
        super();
        /**
         * Whether the button is selected.
         * @attribute
         */
        this.selected = false;
        this.renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
        this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
    }
    beginPress(options) {
        super.beginPress(options);
        this.ripple.beginPress(options.positionEvent);
    }
    endPress(options) {
        super.endPress(options);
        this.ripple.endPress();
        if (!options.cancelled) {
            this.dispatchEvent(new Event('trigger', { bubbles: true, composed: true }));
        }
    }
    handlePointerEnter(e) {
        this.ripple.beginHover(e);
    }
    handlePointerLeave(e) {
        super.handlePointerLeave(e);
        this.ripple.endHover();
    }
    handleIconSlotChange() {
        this.requestUpdate();
    }
    render() {
        const { pressed = false, selected = false } = this;
        const surfaceClasses = classMap({
            surface: true,
            pressed,
            selected,
        });
        return html `
    <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
      ${this.renderRipple()}
      <div class="content">
        ${this.leadingContent()}  
        <slot></slot>
      </div>
    </div>
    `;
    }
    leadingContent() {
        const { leadingIcons } = this;
        const classes = {
            'leading': true,
            visible: !!this.selected || !!leadingIcons.length,
        };
        return html `
    <div class="${classMap(classes)}">
      ${this.renderLeadingIcon()}
      ${this.renderChecked()}
    </div>
    `;
    }
    renderLeadingIcon() {
        const { leadingIcons } = this;
        const classes = {
            'leading-icon': true,
            'with-icon': !!leadingIcons.length,
            hidden: !!this.selected,
        };
        return html `
    <div class="${classMap(classes)}"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot></div>
    `;
    }
    renderChecked() {
        const iconClasses = classMap({
            'check-mark': true,
            checked: !!this.selected,
        });
        return html `<span class="${iconClasses}" role="presentation">${check}</span>`;
    }
}
__decorate([
    query('ui-ripple')
], SegmentedButton.prototype, "ripple", void 0);
__decorate([
    property({ type: Boolean })
], SegmentedButton.prototype, "selected", void 0);
__decorate([
    queryAssignedElements({ flatten: true, slot: 'icon' })
], SegmentedButton.prototype, "leadingIcons", void 0);
//# sourceMappingURL=SegmentedButton.js.map