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: '3badff7661e8f31c132bc7604ede5d7a721fbd81' }, h("div", { key: 'd80ac32f690cfe214da88e7ec1f76126bc76a5d6', class: "transaction-toast-bar-wrapper", style: { opacity: this.hasTimeElapsed ? '0' : '1' } }, h("div", { key: '70fc37ab2ce5cbb3d9a8c102777ce13998907ba1', class: "transaction-toast-bar fixed", style: {
                '--animation-duration': `${this.expectedTransactionDuration}s`,
                '--start-width': `${this.percentagePassedSinceStart}%`,
            } }), h("div", { key: '2e2b6a86e26fcb0f31ab7c57e9df172a701d55c5', class: "transaction-toast-bar infinite" }, h("div", { key: '7b477dbe7d80072f8772b5312ea487e1ec0e4772', class: "transaction-toast-bar-line", style: {
                '--start-width': `${this.infinitePercentagePassedSinceStart}%`,
                '--animation-duration': `${this.infinitePercentageAnimationDuration}s`,
                '--animation-delay': `${this.infiniteProgressDelay}s`,
            } })), h("div", { key: '69b898c700421df20ba80b80d22e902fb2a95f33', class: classNames('transaction-toast-bar fill', {
                animate: this.shouldQuickFill,
            }) })), h("div", { key: '45984b995a0035da9a3f9493a0c4b54c5b2ac9c2', class: "transaction-toast-bar-content" }, h("slot", { key: '831de91dafa913f66e3e4903a69aaa93a1e16697' }))));
    }
    static get is() { return "transaction-toast-progress"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["transaction-toast-progress.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["transaction-toast-progress.css"]
        };
    }
    static get properties() {
        return {
            "startTime": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "start-time",
                "reflect": false
            },
            "endTime": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "end-time",
                "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
