// Libraries
import lottie from 'lottie-web/build/player/lottie.js';
// Stencil
import { h } from "@stencil/core";
/**
 * Copied from https://github.com/splitinfinities/lottie-wc
 * All of the following methods are not commented
 */
export class LottieAnimation {
    constructor() {
        this.loop = true;
        this.autoplay = true;
        this.renderer = "svg";
        this.speed = 1;
        this.direction = 1;
        // States
        this.__paused = false;
        this.settings = null;
    }
    // Methods
    async play() {
        this.status = "play";
        this.lottie.play();
    }
    async pause() {
        this.__paused = true;
        this.status = "pause";
        this.lottie.pause();
    }
    async stop() {
        this.status = "stop";
        this.lottie.stop();
    }
    async setSpeed(value = 1) {
        this.lottie.setSpeed(value);
    }
    async setDirection(value = 1) {
        this.lottie.setDirection(value);
    }
    async rendererSettings(settings) {
        this.settings = settings;
        this.lottie = this.settings;
    }
    async instance() {
        return this.lottie;
    }
    /**
      Renders the settings object and checks if the data is added via src or animationData element
     */
    async update(settings) {
        const settingsObj = Object.assign({ renderer: this.renderer, loop: this.count ? this.count : this.loop, autoplay: this.autoplay, rendererSettings: {
                scaleMode: 'noScale',
                clearCanvas: false,
                progressiveLoad: true,
                hideOnTransparent: true
            } }, settings);
        if (this.animationData) {
            settingsObj.animationData = this.animationData;
        }
        else {
            settingsObj.path = this.src;
        }
        this.settings = settingsObj;
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentDidLoad() {
        this.update({ container: this.element.querySelector('.animation') });
        this.load();
        this.setSpeed(this.speed);
        this.setDirection(this.direction);
        if (this.autoplay) {
            this.addIntersectionObserver();
        }
    }
    ////////////////////////////////////////////////////////////////
    // Private Methods
    ////////////////////////////////////////////////////////////////
    load() {
        this.lottie = lottie.loadAnimation(this.settings);
    }
    addIntersectionObserver() {
        try {
            if ('IntersectionObserver' in window) {
                this.io = new IntersectionObserver((data) => {
                    // because there will only ever be one instance
                    // of the element we are observing
                    // we can just use data[0]
                    if (data[0].isIntersecting) {
                        this.play();
                    }
                    else {
                        this.pause();
                    }
                });
                this.io.observe(this.element.querySelector('.animation'));
            }
            else {
                this.play();
            }
        }
        catch (e) {
            console.error(e);
        }
        ;
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", null,
            h("div", { class: "animation", "data-status": this.status })));
    }
    static get is() { return "lottie-animation"; }
    static get originalStyleUrls() { return {
        "$": ["lottie-animation.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["lottie-animation.css"]
    }; }
    static get properties() { return {
        "animationData": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "animation-data",
            "reflect": false
        },
        "src": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "src",
            "reflect": false
        },
        "loop": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "loop",
            "reflect": false,
            "defaultValue": "true"
        },
        "count": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "count",
            "reflect": false
        },
        "autoplay": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "autoplay",
            "reflect": false,
            "defaultValue": "true"
        },
        "controls": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "controls",
            "reflect": false
        },
        "renderer": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "renderer",
            "reflect": false,
            "defaultValue": "\"svg\""
        },
        "speed": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "speed",
            "reflect": false,
            "defaultValue": "1"
        },
        "direction": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "direction",
            "reflect": false,
            "defaultValue": "1"
        }
    }; }
    static get states() { return {
        "__paused": {},
        "settings": {},
        "io": {},
        "status": {},
        "lottie": {}
    }; }
    static get methods() { return {
        "play": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "pause": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "stop": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "setSpeed": {
            "complexType": {
                "signature": "(value?: number) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "setDirection": {
            "complexType": {
                "signature": "(value?: number) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "rendererSettings": {
            "complexType": {
                "signature": "(settings: any) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "instance": {
            "complexType": {
                "signature": "() => Promise<any>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<any>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "update": {
            "complexType": {
                "signature": "(settings: any) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "AnimationConfigWithPath": {
                        "location": "import",
                        "path": "lottie-web/build/player/lottie.js"
                    },
                    "AnimationConfigWithData": {
                        "location": "import",
                        "path": "lottie-web/build/player/lottie.js"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Renders the settings object and checks if the data is added via src or animationData element",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
}
