/* eslint-disable @typescript-eslint/naming-convention */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// #region Imports
import { AnimationPlayer } from '../../Animations/AnimationPlayer';
import { Property } from '../Decorators/PropertyDecorator';
/**
 * @public
 */
export const Animatable = (base) => {
    class AnimatableElement extends base {
        // #region Fields
        _animationPlayer;
        _animationReady;
        _enter;
        _exit;
        // #endregion
        // #region Ctor
        /**
         * Constructs a new instance of the `AnimatableElement` class.
         *
         * @public
         */
        constructor(...args) {
            super(args);
            this._animationReady = false;
            this._enter = null;
            this._exit = null;
            this._animationPlayer = new AnimationPlayer(this);
        }
        // #endregion
        // #region Properties
        /**
         * Gets or sets the `enter` animation property.
         *
         * @public
         * @attr
         */
        get enter() {
            return this._enter;
        }
        set enter(value) {
            if (this._enter !== value) {
                this._enter = value;
                this.requestUpdate('enter');
            }
        }
        /**
         * Gets or sets the `exit` animation property.
         *
         * @public
         * @attr
         */
        get exit() {
            return this._exit;
        }
        set exit(value) {
            if (this._exit !== value) {
                this._exit = value;
                this.requestUpdate('exit');
            }
        }
        // #endregion
        // #region Methods
        /**
         * @public
         * @override
         */
        connectedCallback() {
            super.connectedCallback();
            if ('onEnterAnimation' in this) {
                void this.onEnterAnimation();
            }
        }
        /**
         * @public
         * @override
         */
        disconnectedCallback() {
            if ('onExitAnimation' in this) {
                void this.onExitAnimation().then(() => {
                    super.disconnectedCallback();
                });
            }
            else {
                super.disconnectedCallback();
            }
        }
        // Public updated(props: PropertyValues<this>): void {
        //     Super.updated(props);
        //     If (!this._animationReady && !this.hasAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME)) {
        //         // this prevents animations from loading onPageLoad
        //         This.setAttribute(PRIVATE_ANIMATION_STATUS_ATTR_NAME, AnimationStatus.ready);
        //         This._animationReady = true;
        //         Return;
        //     }
        //     RunPropertyAnimations(props, this);
        // }
        /**
         * @public
         * @override
         */
        async play(animation) {
            const [, event] = await Promise.all([
                this._animationPlayer.stopAll(),
                this._animationPlayer.play(animation)
            ]);
            return event.type === 'finish';
        }
    }
    __decorate([
        Property({ type: Object }),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], AnimatableElement.prototype, "enter", null);
    __decorate([
        Property({ type: Object }),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [Object])
    ], AnimatableElement.prototype, "exit", null);
    return AnimatableElement;
};
//# sourceMappingURL=Animatable.js.map