const { Machine, interpret } = XState
const myMachine = Machine({
    id: 'myMachineID',
    context: {
      /* some data */
    },
    initial: 'idle',
    states: {
        idle: {
          on: {
            GET: 'waitingConfirmation',
          }
        },
        waitingConfirmation: {
          on: {
            CANCEL: 'idle',
            CONFIRM: 'waitingData'
          }
        },
        waitingData: {
          on: {
            SUCCESS: 'dataReady',
            FAILURE: 'dataProblem'
          },
        },
        dataReady: {
          on: {
            REPEAT: 'idle'
          }
        },
        dataProblem: {
          on: {
            REPEAT: 'idle'
          }
        }
    }
  })
new Vue({
  el: "#app",
  data: {
    text: '',
    toggleService: interpret(myMachine),
    current: myMachine.initialState,
  },
  computed: {
  },
  mounted() {
    this.toggleService
        .onTransition(state => {
          this.current = state
        })
        .start();
  },
  methods: {
    send(event) {
      this.toggleService.send(event);
    },
    getData() {
      this.send('CONFIRM')
      requestMock()
      .then((data) => {
        this.text = data.text
        this.send('SUCCESS')
      })
      .catch(() => this.send('FAILURE'))
    },
  }
})
function randomInteger(min, max) {
  let rand = min + Math.random() * (max + 1 - min)
  return Math.floor(rand);
}
function requestMock() {
  return new Promise((resolve, reject) => {
    const randomValue = randomInteger(1,2)
    if(randomValue === 2) {
      let data = { text: 'Data received!!!'}
      setTimeout(resolve, 3000, data)
    }
    else {
      setTimeout(reject, 3000)
    }
  })
}