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

machine.js

const States = {
  collapsed: 'collapsed',
  expanded: 'expanded',
};

const Event = {
  expand: 'expand',
  collapse: 'collapse',
  batteryStateChange: 'battery-state-change',
  levelChange: 'level_change',
};

const BatteryState = {
  LowBattery: 'low-battery',
  NotCharging: 'not-charging',
  Charging: 'charging',
};

const CombinedBatteryStateConfig = {
  initial: BatteryState.NotCharging,
  context: {
    level: 1,
    batteries: {
      left: {
        charging: false,
        level: 1,
      },
      right: {
        charging: false,
        level: 1,
      },
    },
  },
  states: {
    [BatteryState.NotCharging]: {
      always: [{ target: BatteryState.LowBattery, cond: 'AnyBatteryLow' }],
      on: {
        [Event.batteryStateChange]: [
          {
            target: BatteryState.Charging,
            cond: 'BothBatteriesCharging',
            action: 'AssignBatteryStatus',
          },
          {
            action: 'AssignBatteryStatus',
          },
        ],
      },
    },
    [BatteryState.Charging]: {
      on: {
        [Event.batteryStateChange]: {
          target: BatteryState.NotCharging,
          cond: 'AnyBatteryNotCharging',
          action: 'AssignBatteryStatus',
        },
      },
    },
    [BatteryState.LowBattery]: {},
  },
};

const SingleBatteryStateConfig = (side, level, status) => ({
  initial: status,
  context: {
    side,
    level,
  },
  states: {
    [BatteryState.Charging]: {
      on: {
        [Event.batteryStateChange]: {
          target: BatteryState.NotCharging,
          cond: 'IsNoLongerCharging',
        },
      },
    },
    [BatteryState.NotCharging]: {
      always: [{ target: BatteryState.LowBattery, cond: 'LowBatteryLevel' }],
      on: {
        [Event.batteryStateChange]: {
          target: BatteryState.Charging,
          cond: 'IsCharging',
        },
      },
    },
    [BatteryState.LowBattery]: {
      on: {
        [Event.batteryStateChange]: {
          target: BatteryState.Charging,
          cond: 'IsCharging',
        },
      },
    },
  },
});

const BatteryStatusMachine = Machine({
  id: 'BatteryCollapseMachine',
  initial: States.collapsed,
  states: {
    [States.collapsed]: {
      on: {
        [Event.expand]: States.expanded,
      },
      ...CombinedBatteryStateConfig,
    },
    [States.expanded]: {
      type: 'parallel',
      on: {
        [Event.collapse]: States.collapsed,
      },
      states: {
        left: { ...SingleBatteryStateConfig('left', 1, BatteryState.NotCharging) },
        right: { ...SingleBatteryStateConfig('right', 1, BatteryState.NotCharging) },
      },
    },
  },
});