import { Fragment, h } from "@stencil/core";
import classNames from "classnames";
const DEFAULT_INFINITE_ANIMATION_DURATION = 30;
export class ToastProgress {
    constructor() {
        this.currentTimestamp = Date.now() / 1000;
        this.hasTimeElapsed = false;
        this.expectedTransactionDuration = 0;
        this.secondsPassedSinceStart = 0;
        this.shouldShowProgressBar = false;
        this.percentagePassedSinceStart = 0;
        this.shouldQuickFill = false;
        this.infiniteProgressDelay = 0;
        this.infinitePercentagePassedSinceStart = 0;
        this.infinitePercentageAnimationDuration = DEFAULT_INFINITE_ANIMATION_DURATION + (this.endTime - this.startTime) * 2;
    }
    componentWillLoad() {
        this.updateProgress();
    }
    handleTimeChange() {
        this.updateProgress();
    }
    updateProgress() {
        this.shouldShowProgressBar = Boolean(this.endTime) && Boolean(this.startTime);
        if (!this.shouldShowProgressBar) {
            this.shouldQuickFill = true;
            this.timeElapsedTimeoutReference = setTimeout(() => (this.hasTimeElapsed = true), 500);
            return;
        }
        this.currentTimestamp = Date.now() / 1000;
        this.expectedTransactionDuration = this.endTime - this.startTime;
        this.secondsPassedSinceStart = this.currentTimestamp - this.startTime;
        this.percentagePassedSinceStart = this.expectedTransactionDuration > 0 ? (this.secondsPassedSinceStart / this.expectedTransactionDuration) * 100 : 0;
        this.infiniteProgressDelay = Math.max(0, this.expectedTransactionDuration - this.secondsPassedSinceStart);
        this.infinitePercentagePassedSinceStart = (this.secondsPassedSinceStart / (this.expectedTransactionDuration + this.infinitePercentageAnimationDuration)) * 100;
    }
    disconnectedCallback() {
        if (this.timeElapsedTimeoutReference) {
            clearTimeout(this.timeElapsedTimeoutReference);
        }
    }
    render() {
        return (h(Fragment, { key: 'c5e73139bbdbc545a9f1da61c44957eb03c8ba04' }, h("div", { key: '9c1302a2270b7ee8f62239b05a48681073428948', class: "transaction-toast-bar-wrapper", style: { opacity: this.hasTimeElapsed ? '0' : '1' } }, h("div", { key: '9582d76cc1d7dacc32e459c8f2e4ab2707e27445', class: "transaction-toast-bar-fixed", style: {
                '--animation-duration': `${this.expectedTransactionDuration}s`,
                '--start-width': `${this.percentagePassedSinceStart}%`,
            } }), h("div", { key: '43d80e2d41743d03ee3a578a16d4c84e13c6ad2b', class: "transaction-toast-bar infinite" }, h("div", { key: '12e8c1f31753566ab507d251eb9cdffacda4a287', class: "transaction-toast-bar-line", style: {
                '--start-width': `${this.infinitePercentagePassedSinceStart}%`,
                '--animation-duration': `${this.infinitePercentageAnimationDuration}s`,
                '--animation-delay': `${this.infiniteProgressDelay}s`,
            } })), h("div", { key: '5073149ffbc830711a637a18a6dcdf4850f41d5c', class: classNames('transaction-toast-bar fill', {
                animate: this.shouldQuickFill,
            }) })), h("div", { key: 'be2251a86a9e210f3db08939969228d911e973a1', class: "transaction-toast-bar-content" }, h("slot", { key: 'fcb77b44ea6283749fc931aa8691737f97ea2989' }))));
    }
    static get is() { return "mvx-transaction-toast-progress"; }
    static get originalStyleUrls() {
        return {
            "$": ["transaction-toast-progress.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["transaction-toast-progress.css"]
        };
    }
    static get properties() {
        return {
            "startTime": {
                "type": "number",
                "attribute": "start-time",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "endTime": {
                "type": "number",
                "attribute": "end-time",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "currentTimestamp": {},
            "hasTimeElapsed": {},
            "expectedTransactionDuration": {},
            "secondsPassedSinceStart": {},
            "shouldShowProgressBar": {},
            "percentagePassedSinceStart": {},
            "shouldQuickFill": {},
            "infiniteProgressDelay": {},
            "infinitePercentagePassedSinceStart": {},
            "infinitePercentageAnimationDuration": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "startTime",
                "methodName": "handleTimeChange"
            }, {
                "propName": "endTime",
                "methodName": "handleTimeChange"
            }];
    }
}
//# sourceMappingURL=transaction-toast-progress.js.map
