// Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)

  const fileSelectState = {
    initial: 'noFileSelected',
    states: {
      noFileSelected: {
        on: {
          SELECT_FILE: 'fileSelected',
        }
      },
      fileSelected: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              'SEND': 'sending',
            },
          },
          // disable editor and send btn
          sending: {
            on: {
              'SEND_SUCCESS': 'idle',
              // Sow error message
              'SEND_ERROR': 'idle',
            },
          },
        },
      },
    },
  };

  const fetchMachine = Machine({
    id: 'templateSelector',
    initial: 'samples',
    states: {
      samples: {
        context: {
          sampleId: ''
        },
        ...fileSelectState
      },
      files: {
        initial: 'idle',
        context: {
          specifiedFolderId: '',
          loadedFolderId: '',
          selectedFileId: '',
        },
        states: {
          idle: {
            on: {
              FETCH_FOLDER: 'folderLoading'
            }
          },
          folderLoading: {
            on: {
              RESOLVE: 'folderSuccess',
              REJECT: 'folderFailure'
            }
          },
          folderSuccess: {
            // Select and send files
            ...fileSelectState,
            on: {
              FETCH_FOLDER: 'folderLoading',
            },
          },
          folderFailure: {
            on: {
              FETCH_FOLDER: 'folderLoading',
            },
          },
        },
      }
    }
  });