const initial_state = {
  alerts: {},
  idGenerator: 0,
  viewport: 'md',
  scrollbar_size: 0,
  popover_component: null,
  popover_props: null,
  popover_ref: null,
  popover_fill_screen: false,
  popover_title: null,
}

export function display(state = initial_state, action) {
  switch (action.type) {
    case 'create_alert':
      return {
        ...state,
        alerts: {
          ...state.alerts,
          [state.idGenerator]: {
            id: state.idGenerator,
            kind: action.kind,
            text: action.text,
          },
        },
        idGenerator: state.idGenerator + 1,
      }
    case 'remove_alert':
      let alerts = {...state.alerts}
      delete alerts[action.alert]
      return {
        ...state,
        alerts,
      }
    case 'store_viewport':
      return {
        ...state,
        viewport: action.viewport,
        scrollbar_size: action.scrollbar_size,
      }
    case 'show_popover':
      return {
        ...state,
        popover_component: action.component,
        popover_props: action.props,
        popover_title: action.title,
        popover_fill_screen: action.fill_screen,
      }
    case 'store_popover_ref':
      return {
        ...state,
        popover_ref: action.ref,
      }
    case 'dismiss_popover':
      return {
        ...state,
        popover_component: null,
        popover_props: null,
        popover_ref: null,
      }
    default:
      return state
  }
}