import { Host, h } from "@stencil/core";
export class XNumber {
    constructor() {
        this.value = 0;
        this.from = 0;
        this.fixed = 0;
        this.thousandsSeparator = ',';
        this.interval = 1;
        this.withoutAnimation = false;
        this.lastNumber = undefined;
        this.actualNumber = undefined;
        this.typingTimer = undefined;
    }
    /**
     * Watch changes in value property
     */
    watchValue() {
        if (this.withoutAnimation) {
            this.actualNumber = this.numberWithCommas(this.value);
            this.lastNumber = this.value;
        }
        else {
            clearTimeout(this.typingTimer);
            this.typingTimer = setTimeout(this.animateNumber, this.interval * 1000);
        }
    }
    /**
     * On component will load hook
     */
    componentWillLoad() {
        this.lastNumber = this.from;
        this.actualNumber = this.from.toFixed(this.fixed);
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (this.withoutAnimation) {
            this.actualNumber = this.numberWithCommas(this.value);
        }
        else {
            setTimeout(() => {
                this.animateNumber();
            }, 300);
        }
    }
    /**
     * Start number animation
     */
    animateNumber() {
        let startTimestamp = null;
        const step = (timestamp) => {
            startTimestamp !== null && startTimestamp !== void 0 ? startTimestamp : (startTimestamp = timestamp);
            const progress = Math.min((timestamp - startTimestamp) / 1000, 1);
            this.actualNumber = this.numberWithCommas(progress * (this.value - this.lastNumber) + this.lastNumber);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
            else {
                this.lastNumber = this.value;
            }
        };
        window.requestAnimationFrame(step);
    }
    /**
     * Format number human readable
     *
     * @param n
     * @returns
     */
    numberWithCommas(n) {
        return parseFloat(n)
            .toFixed(this.fixed)
            .replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandsSeparator);
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '0df9333b9b74a5153c2f904867fe8fb8443f42f5' }, this.actualNumber);
    }
    static get is() { return "x-number"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element number value"
                },
                "attribute": "value",
                "reflect": false,
                "defaultValue": "0"
            },
            "from": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Initial number to start animate"
                },
                "attribute": "from",
                "reflect": false,
                "defaultValue": "0"
            },
            "fixed": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Decimal numbers to fix"
                },
                "attribute": "fixed",
                "reflect": false,
                "defaultValue": "0"
            },
            "thousandsSeparator": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Symbol thousand separator"
                },
                "attribute": "thousands-separator",
                "reflect": false,
                "defaultValue": "','"
            },
            "interval": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element animation interval"
                },
                "attribute": "interval",
                "reflect": false,
                "defaultValue": "1"
            },
            "withoutAnimation": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element disable animation"
                },
                "attribute": "without-animation",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "lastNumber": {},
            "actualNumber": {},
            "typingTimer": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
}
