import { h } from '../bodymovin-web-components.core.js';

import { LottieAnimationLoader, LottieConfigCreator } from './index.js';

class LottieAnimationComponent {
    constructor() {
        this.autoplay = false;
        this.dataJson = false;
        this.loop = false;
        this.src = false;
    }
    onDataJsonChange(value) {
        this.updateDataJson(value);
    }
    onSrcChange(value) {
        this.updateSrc(value);
    }
    componentDidLoad() {
        this.lottieAnimationLoader = new LottieAnimationLoader();
        this.lottieConfigCreator = new LottieConfigCreator();
        this.updateDataJson(this.dataJson);
        this.updateSrc(this.src);
    }
    play() {
        this.lottieAnimation.play();
    }
    updateSrc(src) {
        if (src) {
            this.lottieAnimation = this.lottieAnimationLoader.load(this.lottieConfigCreator.createWithSrc(this.animationContainerElement, src, this.autoplay, this.loop), (d) => this.emitOnAnimationLoadedEvent(d));
        }
    }
    updateDataJson(dataJson) {
        if (dataJson) {
            this.lottieAnimation = this.lottieAnimationLoader.load(this.lottieConfigCreator.createWithData(this.animationContainerElement, dataJson, this.autoplay, this.loop), (d) => this.emitOnAnimationLoadedEvent(d));
        }
    }
    emitOnAnimationLoadedEvent(data) {
        this.onAnimationLoaded.emit(data);
    }
    render() {
        return (h("div", { class: "lottie-animation" },
            h("div", { class: "lottie-animation__container", ref: (el) => this.animationContainerElement = el })));
    }
    static get is() { return "lottie-animation"; }
    static get encapsulation() { return "shadow"; }
    static get properties() { return {
        "autoplay": {
            "type": "Any",
            "attr": "autoplay"
        },
        "dataJson": {
            "type": "Any",
            "attr": "data-json",
            "watchCallbacks": ["onDataJsonChange"]
        },
        "loop": {
            "type": "Any",
            "attr": "loop"
        },
        "play": {
            "method": true
        },
        "src": {
            "type": "Any",
            "attr": "src",
            "watchCallbacks": ["onSrcChange"]
        }
    }; }
    static get events() { return [{
            "name": "onAnimationLoaded",
            "method": "onAnimationLoaded",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return ".lottie-animation.sc-lottie-animation, .lottie-animation__container.sc-lottie-animation{width:100%;height:100%}.lottie-animation.sc-lottie-animation   svg.sc-lottie-animation{display:block;width:100%}"; }
}

export { LottieAnimationComponent as LottieAnimation };
