// Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const stylesMachine = Machine({
    id: 'overlapping_styles',
    initial: 'idle',
    context: {
      event_id: null,
      overlapping: [],
      styles: [],
      error: null,
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading_overlapping',
          SET_EVENT: {
            target: 'loading_overlapping',
            actions: assign({
              event_id: (_, event) => event.id,
            }),
          }
        }
      },
      loading_overlapping: {
        invoke: {
          src: 'fetch_overlapping',
          onDone: {
            target: 'loading_styles',
            actions: assign({
              overlapping: (_, event) => event.data,
            })
          },
          onError: {
            target: 'overlapping_rejected',
            actions: assign({
              error: (_, event) => event.error,
            })
          }
        }
      },
      loading_styles: {
        invoke: {
          src: 'fetch_styles',
          onDone: {
            target: 'styles_fulfilled',
            actions: assign({
              styles: (_, event) => event.data,
            })
          },
          onError: {
            target: 'styles_rejected',
            actions: assign({
              error: (_, event) => event.error,
            })
          }
        }
      },
      styles_fulfilled: {
        type: 'final',
      },
      styles_rejected: {
        on: {
          RETRY: 'loading_styles',
        }
      },
      overlapping_rejected: {
        on: {
          BAD_REQUEST: 'bad_request',
          INTERNAL_SERVER_ERROR: 'internal_server_error'
        }
      },
      bad_request: {
        on: {
          REQUEST: 'loading_styles',
        }
      },
      internal_server_error: {
        type: 'final',
      }
    }
  });