Generated by XState Viz: https://xstate.js.org/viz

machine.js

const { cancel } = actions;

const timerMachine = Machine(
  {
    initial: "idle",
    context: {
      autodismiss: 5000,
      paused: false,
      startedAt: null,
      remaining: 0
    },
    states: {
      idle: {
        on: {
          TOGGLE: "active"
        }
      },
      active: {
        entry: [
          "countdown", 
          "startCountdown"
        ],
        on: {
          TOGGLE: "paused",
          FINISH: "complete"
        }
      },
      paused: {
        entry: [
          "pauseCountdown",
          "pause"
        ],
        on: {
          TOGGLE: "active"
        }
      },
      complete: {
        type: "final"
      }
    }
  },
  {
    actions: {
      startCountdown: send('FINISH', { id: 'timer', delay: (ctx) => ctx.remaining > 0 ? ctx.remaining : ctx.autodismiss }),
      pauseCountdown: cancel('timer'),
      countdown: assign((ctx, event) => {
        const startedAt = Date.now();
        return {
          paused: false,
          startedAt,
        }
      }),
      pause: assign((ctx, event) => {
        const total = ctx.remaining > 0 ? ctx.remaining : ctx.autodismiss;
        const elapsed = Date.now() - ctx.startedAt;
        const remaining = total - elapsed;
        console.log({ total, elapsed, remaining });
        return {
          paused: true,
          startedAt: null,
          remaining
        }
      })
    }
  }
);