import { h, Host } from "@stencil/core";
export class PnBonusProgressbar {
    constructor() {
        this.icon = null;
        this.heading = '';
        this.sumtext = null;
        this.theme = 'blue';
        this.bonuspercentage = '0%';
        this.currency = 'kr';
        this.value = 0;
        this.min = 0;
        this.max = 0;
        this.valuepercentage = 0;
        this.progresspercentage = 0;
        this.levelValues = [];
        this.currentLevelAdjustedValue = 0;
    }
    hostElement;
    componentWillLoad() {
        this.setInitialValues();
        this.setValuePercentage();
    }
    setInitialValues() {
        const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));
        this.currentLevelAdjustedValue = this.value;
        this.levelValues = levelElements.map(elm => {
            return parseInt(elm.getAttribute('value'), 10);
        });
        if (!this.max) {
            if (this.levelValues && this.levelValues.length > 0) {
                const newMax = this.levelValues.slice(-1)[0];
                let modifier = 1.05;
                if (this.value > newMax) {
                    modifier = 1.2;
                }
                this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to
            }
        }
        // if (!this.min) {
        //   const suggestedMin = Math.floor(this.value * 0.9);
        //   if (suggestedMin > 0) {
        //     this.min = suggestedMin;
        //   }
        // }
        if (this.value > this.max) {
            this.currentLevelAdjustedValue = 100;
        }
    }
    setValuePercentage() {
        this.valuepercentage = (this.value / this.max) * 100;
        this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
        if (this.progresspercentage < 0) {
            if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {
                this.min = Math.floor(this.levelValues[0] * 0.95);
            }
            else {
                this.min = Math.floor(this.value * 0.95);
            }
        }
        if (this.progresspercentage > 100) {
            this.progresspercentage = 100;
            const newMax = this.levelValues.slice(-1)[0];
            let modifier = 1.05;
            if (this.value > newMax) {
                modifier = 1.2;
            }
            this.max = Math.floor(newMax * modifier); // This sets the max value which all levels are relative to
            // this.max = Math.floor(newMax * 1.20);
        }
    }
    iconColor() {
        switch (this.theme) {
            case 'red':
                return 'coral700';
            case 'blue':
            default:
                return 'blue700';
        }
    }
    render() {
        return (h(Host, { key: '0c2800a5ff59a29a2932257f625a86ec8217ab78' }, h("div", { key: 'd53c24cd81f61b5b71e8065b423108e70b37228e', class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { icon: this.icon, small: "false", color: this.iconColor() }))) : ({}), h("div", { key: '4bf2dd629ee729f680f75e0bdb25d60ab29463cb', class: "bonusprogressbar-top-heading" }, h("h4", { key: 'c23baca714b75a70374c164c4af5fee0ac3df1a8', class: "bonusprogressbar-top-headline" }, this.heading, " ", h("strong", { key: 'aecfe379324384f06b23c648de1f902a6f233f62', class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), this.sumtext ? h("div", { class: "bonusprogressbar-sumtext" }, this.sumtext) : null)), h("div", { key: 'c4186c08abbf122d0895f030a836b5adbd4b4a6c', class: "bonusprogressbar-wrapper" }, h("progress", { key: '043df984daf3c135d4248c67e62d83ee4e1ea978', class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("slot", { key: 'adc85d4228cbbc28aa2846b78f753660cd7e366a' }))));
    }
    static get is() { return "pn-bonus-progressbar"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-bonus-progressbar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-bonus-progressbar.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "icon",
                "reflect": false,
                "defaultValue": "null"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading",
                "reflect": false,
                "defaultValue": "''"
            },
            "sumtext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "sumtext",
                "reflect": true,
                "defaultValue": "null"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "theme",
                "reflect": true,
                "defaultValue": "'blue'"
            },
            "bonuspercentage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "bonuspercentage",
                "reflect": false,
                "defaultValue": "'0%'"
            },
            "currency": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "currency",
                "reflect": true,
                "defaultValue": "'kr'"
            },
            "value": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "value",
                "reflect": true,
                "defaultValue": "0"
            },
            "min": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "min",
                "reflect": true,
                "defaultValue": "0"
            },
            "max": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "max",
                "reflect": true,
                "defaultValue": "0"
            }
        };
    }
    static get states() {
        return {
            "valuepercentage": {},
            "progresspercentage": {},
            "levelValues": {},
            "currentLevelAdjustedValue": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "currentLevelAdjustedValue",
                "methodName": "setValuePercentage"
            }, {
                "propName": "value",
                "methodName": "setValuePercentage"
            }, {
                "propName": "min",
                "methodName": "setValuePercentage"
            }, {
                "propName": "max",
                "methodName": "setValuePercentage"
            }];
    }
}
//# sourceMappingURL=pn-bonus-progressbar.js.map
