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

machine.js

const isNotMin = (context) => context.count > 0;

// Edit your machine(s) here
const counterMachine = Machine({
	id: "counter",
	initial: "init",
	context: {
		count: 0,
	},
	states: {
		init: {
			on: {
				INCREMENT: {
					actions: ['increment'],
					cond: 'withinThreshold',
				},
				DECREMENT: {
					actions: ['decrement'],
					cond: isNotMin
				},
				'': [
					{ target: 'cooldown', cond: 'aboveThreshold' }
				]
			}
		},
		cooldown: {
			after: {
        1000: {
          target: "cooldown",
          actions: "decrement",
          cond: (context) => context.count > 0
        }
      },
      on: {
				// only allow decrement in cooldown state
				DECREMENT: {
					actions: ['decrement'],
					cond: isNotMin
				},
				'': [
					{ target: 'init', cond: (context) => context.count === 0 }
				]
			}
		}
	},
}, {
	// Actions (anything that directly mutates state)
	actions: {
		increment: assign((context) => ({
			count: context.count + 1
		})),
		decrement: assign((context) => ({
			count: context.count - 1
		})),
	},

	// Guards
	guards: {
		withinThreshold: context => context.count < 10,
		aboveThreshold: context => context.count >= 10,
	}
})