import { ReactNode } from 'react'
import { fromMapToArray } from 'exotic'
import { action, decorate, observable } from 'xmobx/mobx'
import { ISidebarGroup, SidebarItemMapper } from './typings'
import { SidebarItemState } from '../SidebarItem'

export class SidebarGroupState implements ISidebarGroup {
  private store = observable.map()

  /**
   * @alias addSidebar
   * @chainable
   */
  @action
  add(item: SidebarItemState) {
    this.store.set(item.identifier, item)
    return this
  }

  /**
   * @description remove all sidebars
   * @chainable
   */
  @action
  clear() {
    this.store.clear()
    return this
  }

  /**
   * @description iterate over all sidebars
   */
  map(handler: SidebarItemMapper) {
    const iteratee = (pair, index) => {
      const [key, value] = pair
      return handler(value, index)
    }
    return fromMapToArray(this.store).map(iteratee)
  }
}