mutations.ts

import { Mutation } from '../app'
import {
  Apps,
  Message,
  Tab,
  ActionsListItemType,
  ActionItem,
  ActionGroupItem,
} from './state'
import {
  runMutation,
  getActionId,
  createApp,
  ensureFlushExists,
  getOperatorId,
} from './utils'

export const setApps: Mutation<Apps> = (state, apps) => {
  if (!apps) {
    state.isAddingPort = true
  }

  state.apps = apps || {}
}

export const configurePort: Mutation = (state) => (state.isAddingPort = true)

export const selectPort: Mutation<string> = (state, port) =>
  (state.currentPort = port)

export const removeApp: Mutation = (state) => {
  delete state.apps[state.currentPort]

  const appPorts = Object.keys(state.apps)

  if (appPorts.length) {
    state.currentPort = appPorts[0]
  } else {
    state.isAddingPort = true
  }
}

export const cancelConfigurePort: Mutation = (state) =>
  (state.isAddingPort = false)

export const setCurrentPort: Mutation<string> = (state, currentPort) => {
  if (currentPort) {
    state.currentPort = currentPort
  } else if (Object.keys(state.apps).length) {
    state.currentPort = Object.keys(state.apps)[0]
  }
}

export const setError: Mutation<string> = (state, error) =>
  (state.error = error)

export const setAppLoaded: Mutation = (state) => (state.isLoading = false)

export const setNewPortValue: Mutation<string> = (state, value) =>
  (state.newPortValue = value)

export const addNewApp: Mutation = (state) => {
  state.apps[state.newPortValue] = createApp({
    port: state.newPortValue,
  })
  state.isAddingPort = false
}

export const resetNewPortValue: Mutation = (state) => (state.newPortValue = '')

export const addMessagesFromClient: Mutation<Message> = (state, message) =>
  (state.apps[message.port].messages = message.message
    .reverse()
    .concat(state.apps[message.port].messages))

export const changeTab: Mutation<Tab> = (state, tab) => (state.currentTab = tab)

export const toggleExpandStatePath: Mutation<string[]> = (state, path) => {
  const pathString = path.join('.')

  if (state.expandedStatePaths.indexOf(pathString) >= 0) {
    state.expandedStatePaths.splice(
      state.expandedStatePaths.indexOf(pathString),
      1
    )
  } else {
    state.expandedStatePaths = state.expandedStatePaths.concat(pathString)
  }
}

export const performMutationsByMessageType: Mutation<Message> = (
  state,
  message
) => {
  message.message.forEach((clientMessage) => {
    switch (clientMessage.type) {
      case 'init': {
        state.apps[message.port] = createApp({
          port: message.port,
          state: clientMessage.data.state,
        })
        break
      }
      case 'flush': {
        ensureFlushExists(
          state.apps[message.port].flushes,
          clientMessage.data.flushId
        )
        state.apps[message.port].flushes[clientMessage.data.flushId].mutations =
          clientMessage.data.mutations

        if (typeof clientMessage.data.operatorId === 'undefined') {
          state.apps[message.port].flushByActionId[
            getActionId(clientMessage.data)
          ] = {
            flushId: clientMessage.data.flushId,
            isCollapsed: true,
          }
        } else {
          state.apps[message.port].flushByOperatorId[
            getOperatorId(clientMessage.data)
          ] = {
            flushId: clientMessage.data.flushId,
            isCollapsed: true,
          }
        }

        clientMessage.data.mutations.forEach(
          runMutation(state.apps[message.port].state)
        )
        break
      }
      case 'component:add': {
        const id = `${clientMessage.data.componentId}_${
          clientMessage.data.componentInstanceId
        }`

        state.apps[message.port].components[id] = {
          id,
          isMounted: true,
          updateCount: 0,
          ...clientMessage.data,
        }
        break
      }
      case 'component:update': {
        const id = `${clientMessage.data.componentId}_${
          clientMessage.data.componentInstanceId
        }`

        state.apps[message.port].components[id].paths = clientMessage.data.paths
        state.apps[message.port].components[id].updateCount++

        ensureFlushExists(
          state.apps[message.port].flushes,
          clientMessage.data.flushId
        )

        state.apps[message.port].flushes[
          clientMessage.data.flushId
        ].components.push(id)
        break
      }
      case 'component:remove': {
        const id = `${clientMessage.data.componentId}_${
          clientMessage.data.componentInstanceId
        }`

        state.apps[message.port].components[id].isMounted = false
        break
      }
      case 'derived': {
        const appState = state.apps[message.port].state
        const path = clientMessage.data.path.split('.')
        const key = path.pop()
        const target = path.reduce((aggr, pathKey) => aggr[pathKey], appState)
        target[key] = {
          paths: clientMessage.data.paths,
          updateCount: clientMessage.data.updateCount,
          value: clientMessage.data.value,
        }

        state.apps[message.port].derived[clientMessage.data.path] =
          clientMessage.data

        break
      }
      case 'derived:dirty': {
        ensureFlushExists(
          state.apps[message.port].flushes,
          clientMessage.data.flushId
        )
        state.apps[message.port].flushes[
          clientMessage.data.flushId
        ].derived.push(clientMessage.data.path)
        break
      }
      case 'computed': {
        const appState = state.apps[message.port].state
        const path = clientMessage.data.path.split('.')
        const key = path.pop()
        const target = path.reduce((aggr, pathKey) => aggr[pathKey], appState)
        target[key] = {
          cache: clientMessage.data.cache,
          limit: clientMessage.data.limit,
          updateCount: clientMessage.data.updateCount,
        }

        state.apps[message.port].computed[clientMessage.data.path] =
          clientMessage.data
        break
      }
      case 'computed:dirty': {
        ensureFlushExists(
          state.apps[message.port].flushes,
          clientMessage.data.flushId
        )
        state.apps[message.port].flushes[
          clientMessage.data.flushId
        ].computed.push(clientMessage.data.path)
        break
      }
      case 'action:start': {
        const app = state.apps[message.port]
        const action = clientMessage.data
        const id = getActionId(action)
        const isSelectingFirstAction =
          !app.currentActionId || app.currentActionId === app.actionsList[0].id

        app.actions[id] = {
          ...action,
          isRunning: true,
          operators: {},
        }

        if (
          !app.actionsList.length ||
          app.actionsList[0].actionId !== action.actionId
        ) {
          app.actionsList.unshift({
            type: ActionsListItemType.ACTION,
            id,
            actionId: action.actionId,
          })
        } else if (app.actionsList[0].type === ActionsListItemType.ACTION) {
          const existingId = (app.actionsList[0] as ActionItem).id
          app.actionsList[0] = {
            type: ActionsListItemType.GROUP,
            id: getActionId(action),
            actionId: action.actionId,
            isCollapsed: true,
            actionIds: [id, existingId],
          }
        } else if (app.actionsList[0].type === ActionsListItemType.GROUP) {
          ;(app.actionsList[0] as ActionGroupItem).actionIds.unshift(id)
          ;(app.actionsList[0] as ActionGroupItem).id = id
        }

        if (isSelectingFirstAction) {
          app.currentActionId = id
        }
        break
      }
      case 'operator:start': {
        const operator = clientMessage.data
        const id = `${operator.actionId}_${operator.executionId}`
        const action = state.apps[message.port].actions[id]

        action.operators[operator.operatorId] = {
          ...operator,
          isRunning: true,
          isCollapsed: true,
          mutations: [],
          effects: [],
        }
        break
      }
      case 'operator:end': {
        const operator = clientMessage.data
        const id = `${operator.actionId}_${operator.executionId}`
        const action = state.apps[message.port].actions[id]

        action.operators[operator.operatorId].isAsync = operator.isAsync
        action.operators[operator.operatorId].isRunning = false
        action.operators[operator.operatorId].result = operator.result
        break
      }
      case 'action:end': {
        const app = state.apps[message.port]
        const action = clientMessage.data
        const id = `${action.actionId}_${action.executionId}`

        app.actions[id].isRunning = false
        break
      }
      case 'mutations': {
        const mutations = clientMessage.data
        const id = `${mutations.actionId}_${mutations.executionId}`
        const operator =
          state.apps[message.port].actions[id].operators[mutations.operatorId]

        operator.mutations = mutations.mutations
        break
      }
      case 'effect': {
        const effect = clientMessage.data
        const id = getActionId(effect)
        const operator =
          state.apps[message.port].actions[id].operators[effect.operatorId]

        operator.effects.push(effect)
        break
      }
    }
  })
}

export const toggleActionItemCollapse: Mutation<string> = (state, actionId) => {
  for (let index in state.currentApp.actionsList) {
    const item = state.currentApp.actionsList[index]
    if (
      item.type === ActionsListItemType.GROUP &&
      item.id === actionId &&
      state.currentApp.currentActionId === actionId
    ) {
      item.isCollapsed = !item.isCollapsed
      break
    }
  }
}

export const selectAction: Mutation<string> = (state, actionId) =>
  (state.currentApp.currentActionId = actionId)

type Collapse = {
  isCollapsed: boolean
}

export const toggleCollapsed: Mutation<Collapse> = (_, item) =>
  (item.isCollapsed = !item.isCollapsed)