import { __decorate } from "tslib";
import { html } 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 { Button } from "./Button.js";
import { ripple } from "../effects/rippleDirective.js";
import '../../define/ui/ui-ripple.js';
/**
 * The type of the icon button rendered.
 */
export var IconButtonType;
(function (IconButtonType) {
    IconButtonType["filled"] = "filled";
    IconButtonType["tonal"] = "tonal";
    IconButtonType["outlined"] = "outlined";
    IconButtonType["standard"] = "standard";
})(IconButtonType || (IconButtonType = {}));
/**
 * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
 */
export default class UiIconButton extends Button {
    constructor() {
        super();
        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.type = IconButtonType.standard;
    }
    update(changedProperties) {
        if (changedProperties.has('active')) {
            this.setAttribute('aria-pressed', String(this.active));
        }
        super.update(changedProperties);
    }
    async pressRipple() {
        const element = await this.getRipple();
        if (element && !element.isPressed) {
            element.beginPress();
        }
    }
    async endRipple() {
        const element = await this.getRipple();
        element?.endPress();
    }
    beginPress(options) {
        super.beginPress(options);
        this.pressRipple();
    }
    endPress(config) {
        super.endPress(config);
        this.endRipple();
        const { cancelled, reason } = config;
        if (cancelled) {
            return;
        }
        if (!reason || reason === 'enter' || reason === 'space') {
            if (this.toggle) {
                this.active = !this.active;
                // note, only dispatch events when user interacting with the UI.
                this.dispatchEvent(new Event('active'));
            }
        }
        if (reason === 'enter' || reason === 'space') {
            if (!this.toggle) {
                this.click();
            }
        }
    }
    render() {
        const { pressed = false } = this;
        const containerClasses = classMap({
            surface: true,
            pressed,
        });
        return html `
    <div class="${containerClasses}" ${ripple(this.getRipple)}>
      <div class="container"></div>
      <div class="state"></div>
      ${when(this.showRipple, this.renderRipple)}
      <div class="content">
        <slot></slot>
      </div>
    </div>
    `;
    }
}
__decorate([
    property({ type: String, reflect: true, })
], UiIconButton.prototype, "type", void 0);
__decorate([
    property({ type: Boolean, reflect: true, })
], UiIconButton.prototype, "toggle", void 0);
__decorate([
    property({ type: Boolean, reflect: true, })
], UiIconButton.prototype, "active", void 0);
__decorate([
    queryAsync('ui-ripple')
], UiIconButton.prototype, "ripple", void 0);
__decorate([
    state()
], UiIconButton.prototype, "showRipple", void 0);
//# sourceMappingURL=UiIconButton.js.map