import { v4 as uuidv4 } from "uuid";
import { h, Host } from "@stencil/core";
import { animateValue } from "./animationHelper";
import { NumberFormatList, NumberFormatStyle } from "./numberFormats";
import { inViewport } from "./viewIntersectionHelper";
export class PnStatsInfoData {
    constructor() {
        this.format = 'En';
        this.formatStyle = 'Decimal';
        this.startValue = 0;
        this.data = 0;
        this.unit = null;
        this.preamble = null;
        this.duration = 1000;
        this.index = null;
        this.hasBeenShown = false;
        this.compId = null;
    }
    inViewPortCallback = (entry) => {
        if (entry.isIntersecting) {
            this.hasBeenShown = true;
        }
    };
    generateUniqueId() {
        return uuidv4();
    }
    componentWillLoad() {
        this.compId = this.generateUniqueId();
    }
    watchStateHandlder(newValue, oldValue) {
        const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);
        if (obj.classList.contains('is-inViewport') && newValue !== oldValue) {
            animateValue(obj, this.startValue, this.data, this.duration, NumberFormatList[this.format].code, NumberFormatStyle[this.formatStyle]);
        }
    }
    render() {
        return (h(Host, { key: 'a1341a3318a51adb8a170b773f9109110bca65c6' }, h("div", { key: 'e7c94b94b3cf2b1c7fd4c05f953ca537ec17153c', class: "pn-stats-info-data__container" }, h("div", { key: '391ad615fa5930728fb3a7baece08d3636c90820', class: "pn-stats-info-data__container__content" }, h("div", { key: 'a54130470a7c195f2789c440167022d9eafbee42', class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }), this.unit && h("div", { key: '0aa67825205280a82b65f8f650203bcbe9318ded', class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { key: '14bd4ef96a6d6be6591dbcb314c395a016e9ad9c', class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
    }
    componentDidRender() {
        const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));
        const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);
        observer.observe(obj);
    }
    static get is() { return "pn-stats-info-data"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-stats-info-data.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-stats-info-data.css"]
        };
    }
    static get properties() {
        return {
            "format": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "format",
                "reflect": false,
                "defaultValue": "'En'"
            },
            "formatStyle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "format-style",
                "reflect": false,
                "defaultValue": "'Decimal'"
            },
            "startValue": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "start-value",
                "reflect": false,
                "defaultValue": "0"
            },
            "data": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "data",
                "reflect": false,
                "defaultValue": "0"
            },
            "unit": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "unit",
                "reflect": false,
                "defaultValue": "null"
            },
            "preamble": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "preamble",
                "reflect": false,
                "defaultValue": "null"
            },
            "duration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "duration",
                "reflect": false,
                "defaultValue": "1000"
            },
            "index": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "index",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "hasBeenShown": {},
            "compId": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "hasBeenShown",
                "methodName": "watchStateHandlder"
            }];
    }
}
//# sourceMappingURL=pn-stats-info-data.js.map
