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;
};
import { MelodicComponent } from '@melodicdev/core';
import { drawerTemplate } from './drawer.template.js';
import { drawerStyles } from './drawer.styles.js';
/**
 * ml-drawer - Slide-out panel overlay
 *
 * @example
 * ```html
 * <ml-drawer side="right">
 *   <div slot="drawer-header">Settings</div>
 *   <p>Drawer content here</p>
 *   <div slot="drawer-footer">
 *     <ml-button>Save</ml-button>
 *   </div>
 * </ml-drawer>
 * ```
 *
 * @slot drawer-header - Header content (title)
 * @slot default - Body content
 * @slot drawer-footer - Footer content (actions)
 * @fires ml:open - Emitted when opened
 * @fires ml:close - Emitted when closed
 */
let DrawerComponent = class DrawerComponent {
    constructor() {
        /** Which side the drawer slides from */
        this.side = 'right';
        /** Width preset */
        this.size = 'md';
        /** Show close button in header */
        this.showClose = true;
        /** Close the drawer */
        this.close = () => {
            if (!this._dialogEl?.open)
                return;
            this.cancelAnimations();
            const prop = this._positionProp;
            const width = this._panelEl.offsetWidth;
            const anim = this._panelEl.animate([{ [prop]: '0px' }, { [prop]: `${-width}px` }], { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'forwards' });
            anim.onfinish = () => {
                this._panelEl.style[prop] = '';
                this._dialogEl.close();
            };
            this.elementRef.dispatchEvent(new CustomEvent('ml:close', { bubbles: true, composed: true }));
        };
        this.handleBackdropClick = (event) => {
            if (event.target === this._dialogEl) {
                this.close();
            }
        };
        this.handleDialogCancel = (event) => {
            event.preventDefault();
            this.close();
        };
    }
    get _positionProp() {
        return this.side === 'left' ? 'left' : 'right';
    }
    cancelAnimations() {
        for (const anim of this._panelEl.getAnimations()) {
            anim.cancel();
        }
    }
    onCreate() {
        this._dialogEl = this.elementRef.shadowRoot?.querySelector('dialog');
        this._panelEl = this._dialogEl?.querySelector('.ml-drawer__panel');
        this._dialogEl?.addEventListener('click', this.handleBackdropClick);
        this._dialogEl?.addEventListener('cancel', this.handleDialogCancel);
    }
    onDestroy() {
        this._dialogEl?.removeEventListener('click', this.handleBackdropClick);
        this._dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
    }
    /** Open the drawer */
    open() {
        if (this._dialogEl?.open)
            return;
        this.cancelAnimations();
        this._dialogEl.showModal();
        const prop = this._positionProp;
        const width = this._panelEl.offsetWidth;
        this._panelEl.style[prop] = `${-width}px`;
        this._panelEl.getBoundingClientRect();
        const anim = this._panelEl.animate([{ [prop]: `${-width}px` }, { [prop]: '0px' }], { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'forwards' });
        anim.onfinish = () => {
            this._panelEl.style[prop] = '0px';
        };
        this.elementRef.dispatchEvent(new CustomEvent('ml:open', { bubbles: true, composed: true }));
    }
};
DrawerComponent = __decorate([
    MelodicComponent({
        selector: 'ml-drawer',
        template: drawerTemplate,
        styles: drawerStyles,
        attributes: ['side', 'size', 'show-close']
    })
], DrawerComponent);
export { DrawerComponent };
