/**
 * Web Component wrapper for AnimotPresenter.
 * Registers <animot-presenter> custom element for use in any framework or vanilla HTML.
 */
import { mount, unmount } from 'svelte';
import AnimotPresenter from './AnimotPresenter.svelte';
// Inject floating animation CSS into the document (once)
import './styles/presenter.css';
const BOOLEAN_PROPS = ['autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard'];
class AnimotPresenterElement extends HTMLElement {
    static get observedAttributes() {
        return ['src', 'autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard', 'duration', 'start-slide'];
    }
    _component = null;
    _pendingRemount = null;
    // Property backing stores — React 19 sets these as properties, not attributes
    _src = null;
    _data = null;
    _autoplay = false;
    _loop = false;
    _controls = false;
    _arrows = false;
    _progress = false;
    _keyboard = false;
    _duration = undefined;
    _startSlide = undefined;
    _onslidechange = null;
    _oncomplete = null;
    // --- Property getters/setters (React 19 sets these directly) ---
    get src() { return this._src ?? this.getAttribute('src'); }
    set src(v) { this._src = v; this._scheduleRemount(); }
    get data() { return this._data; }
    set data(v) { this._data = v; this._scheduleRemount(); }
    get autoplay() { return this._autoplay || this.hasAttribute('autoplay'); }
    set autoplay(v) { this._autoplay = !!v; this._scheduleRemount(); }
    get loop() { return this._loop || this.hasAttribute('loop'); }
    set loop(v) { this._loop = !!v; this._scheduleRemount(); }
    get controls() { return this._controls || this.hasAttribute('controls'); }
    set controls(v) { this._controls = !!v; this._scheduleRemount(); }
    get arrows() { return this._arrows || this.hasAttribute('arrows'); }
    set arrows(v) { this._arrows = !!v; this._scheduleRemount(); }
    get progress() { return this._progress || this.hasAttribute('progress'); }
    set progress(v) { this._progress = !!v; this._scheduleRemount(); }
    get keyboard() { return this._keyboard || this.hasAttribute('keyboard'); }
    set keyboard(v) { this._keyboard = !!v; this._scheduleRemount(); }
    get duration() { return this._duration; }
    set duration(v) { this._duration = v; this._scheduleRemount(); }
    get startSlide() { return this._startSlide; }
    set startSlide(v) { this._startSlide = v; this._scheduleRemount(); }
    get onslidechange() { return this._onslidechange; }
    set onslidechange(fn) {
        this._onslidechange = fn;
        this._scheduleRemount();
    }
    get oncomplete() { return this._oncomplete; }
    set oncomplete(fn) {
        this._oncomplete = fn;
        this._scheduleRemount();
    }
    connectedCallback() {
        this._mount();
    }
    disconnectedCallback() {
        this._cancelPendingRemount();
        this._unmount();
    }
    attributeChangedCallback() {
        if (this.isConnected && this._component) {
            this._scheduleRemount();
        }
    }
    _buildProps() {
        const props = {};
        // Read from property first (React 19), fall back to attribute (vanilla HTML)
        const src = this._src ?? this.getAttribute('src');
        if (src)
            props.src = src;
        props.autoplay = this.autoplay;
        props.loop = this.loop;
        props.controls = this.controls;
        props.arrows = this.arrows;
        props.progress = this.progress;
        props.keyboard = this.keyboard;
        const duration = this._duration ?? this.getAttribute('duration');
        if (duration != null)
            props.duration = Number(duration);
        const startSlide = this._startSlide ?? this.getAttribute('start-slide');
        if (startSlide != null)
            props.startSlide = Number(startSlide);
        if (this._data)
            props.data = this._data;
        if (this._onslidechange) {
            props.onslidechange = this._onslidechange;
        }
        else {
            props.onslidechange = (index, total) => {
                this.dispatchEvent(new CustomEvent('slidechange', { detail: { index, total }, bubbles: true }));
            };
        }
        if (this._oncomplete) {
            props.oncomplete = this._oncomplete;
        }
        else {
            props.oncomplete = () => {
                this.dispatchEvent(new CustomEvent('complete', { bubbles: true }));
            };
        }
        return props;
    }
    _cancelPendingRemount() {
        if (this._pendingRemount) {
            clearTimeout(this._pendingRemount);
            this._pendingRemount = null;
        }
    }
    _scheduleRemount() {
        if (!this.isConnected)
            return;
        this._cancelPendingRemount();
        this._pendingRemount = setTimeout(() => {
            this._pendingRemount = null;
            this._unmount();
            this._mount();
        }, 0);
    }
    _mount() {
        if (this._component)
            return;
        if (!this.style.display) {
            this.style.display = 'block';
        }
        if (!this.style.height && !this.getAttribute('style')?.includes('height')) {
            this.style.height = '100%';
        }
        this._component = mount(AnimotPresenter, {
            target: this,
            props: this._buildProps()
        });
    }
    _unmount() {
        if (this._component) {
            unmount(this._component);
            this._component = null;
            this.innerHTML = '';
        }
    }
    next() {
        const nextBtn = this.querySelectorAll('.animot-controls button')[2];
        if (nextBtn && !nextBtn.disabled)
            nextBtn.click();
    }
    prev() {
        const prevBtn = this.querySelectorAll('.animot-controls button')[0];
        if (prevBtn && !prevBtn.disabled)
            prevBtn.click();
    }
}
if (typeof customElements !== 'undefined' && !customElements.get('animot-presenter')) {
    customElements.define('animot-presenter', AnimotPresenterElement);
}
export { AnimotPresenterElement };
