Generated by XState Viz: https://xstate.js.org/viz

machine.js

const tapStates = {
  initial: 'tapOff',
  states: {
    tapOff: {
      on: {
        TAP_ON: 'tapOn'
      }
    },
    tapOn: {
      on: {
        TAP_OFF: 'tapOff'
      }
    }
  }
};

const soapStates = {
  initial: 'soapOff',
  states: {
    soapOff: {
      on: {
        SOAP_ON: 'soapOn'
      }
    },
    soapOn: {
      on: {
        SOAP_OFF: 'soapOff'
      }
    }
  }
};

const washingSubstates = {
  type: 'parallel',
  states: {
    tapStates,
    soapStates
  }
}


const handWashMachine4 = Machine({
  id: 'handwash',
  initial: 'unwashed',
  states: {
    unwashed: {
      on: {
        START_WASH: 'washing'
      }
    },
    washing: {
      on: {
        STOP_WASH: 'unwashed'
      },
      after: {
        20000: 'washed'
      },
      ...washingSubstates
    },
    washed: {
      type: 'final'
    }
  }
});