"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.messageFadeInDuration = exports.messageDurationReducedMotionMultiplier = exports.messageDurationStandard = void 0;
const dom_1 = require("../../common/dom");
exports.messageDurationStandard = 1500;
exports.messageDurationReducedMotionMultiplier = 1.5;
exports.messageFadeInDuration = 833;
class ProgressBarExpressive {
    onCreate(input) {
        // For medium sized text, display the first message immediately
        this.fadeInFirstMessage = input.size !== "medium";
        this.state = {
            isInitialMessage: true,
            messageIsFadingIn: false,
            currentMessageIndex: -1,
            nextMessageIndex: 0,
        };
        this.timeouts = { fadeIn: undefined, showMessage: undefined };
    }
    onInput(input) {
        this.initializeMessageRotation(input.message);
    }
    onDestroy() {
        this.clearTimeouts();
    }
    clearTimeouts() {
        clearTimeout(this.timeouts.fadeIn);
        clearTimeout(this.timeouts.showMessage);
    }
    initializeMessageRotation(messages) {
        const messageCount = [...(messages || [])].length;
        if (messageCount > 0) {
            // Ensure next message index is in new message array bounds
            if (this.state.nextMessageIndex >= messageCount) {
                this.state.nextMessageIndex = 0;
            }
            this.clearTimeouts();
            setTimeout(() => {
                this.state.isInitialMessage = false;
            }, exports.messageDurationStandard);
            if (!this.fadeInFirstMessage) {
                // Automatically show first message (no delay or animation)
                this.showMessage(messages);
            }
            else if (dom_1.useReducedMotion) {
                // In reduced motion mode, fade in first message immediately
                this.showMessage(messages, exports.messageFadeInDuration);
            }
            else {
                // Fade in first message after a short delay
                setTimeout(this.fadeInMessage.bind(this), messageCount === 1
                    ? exports.messageDurationStandard / 2
                    : exports.messageDurationStandard);
            }
        }
    }
    /**
     * Determine how long a message should display.
     * Displays longer when user prefers reduced motion.
     * @returns time in milliseconds
     */
    getMessageDuration(message) {
        return (((message === null || message === void 0 ? void 0 : message.duration) || exports.messageDurationStandard) *
            (dom_1.useReducedMotion ? exports.messageDurationReducedMotionMultiplier : 1));
    }
    /**
     * Animate in a message, queuing up the next one
     */
    fadeInMessage() {
        this.state.messageIsFadingIn = true;
        this.timeouts.showMessage = setTimeout(this.showMessage.bind(this), exports.messageFadeInDuration);
    }
    /**
     * Display a message and queue the next one
     */
    showMessage(messageTags = this.input.message, extraDelay = 0) {
        const messages = [...(messageTags || [])];
        if (messageTags) {
            const messageCount = messages.length;
            if (messageCount > 1) {
                const currentIndex = this.state.nextMessageIndex;
                const nextIndex = currentIndex === messageCount - 1 ? 0 : currentIndex + 1;
                // Show current message
                this.state.currentMessageIndex = currentIndex;
                this.state.messageIsFadingIn = false;
                // Queue next message
                this.state.nextMessageIndex = nextIndex;
                this.timeouts.fadeIn = setTimeout(this.fadeInMessage.bind(this), extraDelay +
                    this.getMessageDuration(messages[currentIndex]));
            }
            else {
                this.state.currentMessageIndex = 0;
                this.state.messageIsFadingIn = false;
            }
        }
    }
}
module.exports = ProgressBarExpressive;
