machine.ts

import {createMachine, createSchema} from 'xstate'

import {assign} from '@xstate/immer'

import {ToastProps} from 'components/Toast'

type AddToastEvent = {
  type: 'ADD_TOAST'
  toast: ToastProps
}

type RemoveToastEvent = {
  index: number
  type: 'REMOVE_TOAST'
}

export const toastMachine = createMachine(
  {
    schema: {
      context: createSchema<{toasts: ToastProps[]}>(),
      events: createSchema<AddToastEvent | RemoveToastEvent>(),
    },
    context: {
      toasts: [],
    },
    id: 'toast-manager',
    initial: `idle`,
    states: {
      idle: {
        on: {
          ADD_TOAST: {
            actions: 'addToast',
          },
          REMOVE_TOAST: {
            actions: 'removeToast',
          },
        },
      },
    },
  },
  {
    actions: {
      addToast: assign((ctx, e) => {
        ctx.toasts.push(e.toast)
      }),
      removeToast: assign((ctx, e) => {
        ctx.toasts.splice(e.index, 1)
      }),
    },
  }
)