import { ReactNode } from 'react'
import { fromMapToArray } from 'exotic'
import { action, decorate, observable } from 'xmobx/mobx'
import { renderStyledSidebar } from './_renderProps'
import {
  ISidebarItem,
  SidebarItemProps,
  SidebarItemRenderProp,
} from './typings'

const EMPTY = '@@EMPTY'

export class SidebarItemState implements ISidebarItem {
  store = observable.map()
  @observable identifier: string = ''
  // @todo default not visible?
  @observable isVisible: boolean = true
  // @alias children
  @observable contents: ReactNode = EMPTY

  static init() {
    return new SidebarItemState()
  }

  render(props: SidebarItemProps | SidebarItemState) {
    console.debug('[SidebarItem] render')

    if (this.store.has('render')) {
      console.info('[SidebarItem] render with a specified render')
      const renderedValue = this.store.get('render')(props)
      return renderedValue
    } else if (this.contents !== EMPTY) {
      console.info('[SidebarItem] returning contents')
      return this.contents
    } else {
      return renderStyledSidebar(props)
    }
  }

  /**
   * these setters are @chainable
   */
  @action
  setIdentifier(identifier: string) {
    this.identifier = identifier
    return this
  }
  @action
  setContents(contents: any) {
    this.contents = contents
    return this
  }
  @action
  setRender(renderProp: SidebarItemRenderProp) {
    this.store.set('render', renderProp)
    return this
  }
  @action
  setIsVisible(isVisible: boolean) {
    console.log(
      '[Sidebar] Item.State setIsVisible ',
      this.identifier,
      this.isVisible
    )
    this.isVisible = isVisible
    return this
  }

  @action.bound
  handleHide() {
    this.setIsVisible(false)
  }
  @action.bound
  handleShow() {
    this.setIsVisible(true)
  }
  @action.bound
  handleToggle() {
    this.setIsVisible(!this.isVisible)
  }
}