const context = {
  password: ""
};

const _actions = {
  assignPassword: XState.assign({
    password: (_, event) => 'password'
  }),
  validatePassword: ctx => {
    setTimeout(() => {
      if (ctx.password === "password") {
        send("VALID");
      } else {
        send("INVALID");
      }
    }, 2000);
  },

  clearPassword: XState.assign({
    password: () => {
      return '';
    }
  })
};

Machine(
  {
    initial: "idle",
    context,
    states: {
      idle: {
        entry: "clearPassword",
        on: {
          SUBMIT: { target: "validating", cond: "passwordEntered" },
          CHANGE: {
            target: "idle",
            actions: "assignPassword",
            internal: true // this prevents onEntry from running again
          }
        },
        initial: 'normal',
        states: {
          normal: {},
          error: {
            after: {
              2000: "normal"
            }
          }
        }
      },
      validating: {
        onEntry: "validatePassword",
        on: {
          VALID: "success",
          INVALID: "idle.error"
        }
      },
      success: {}
    },
    on: {
      RESET: ".idle"
    }
  },
  {
    actions: _actions,
    guards: {
      passwordEntered: ctx => {
        return ctx.password && ctx.password.length
      }
    }
  }
)