import { ReactNode } from 'react'
import { SidebarItemState } from './SidebarItemState'

export interface SidebarItemProps {
  // why have contents?
  // contents: any

  children?: ReactNode

  state?: SidebarItemState
  isVisible?: boolean

  // animation
  // side?: 'left' | 'right' | 'top' | 'bottom' | string

  // style compat
  className?: string
}

export interface SidebarItemRenderProp extends Function {
  (props: SidebarItemProps | SidebarItem | SidebarItemState): ReactNode
}

export interface SidebarItem {
  // used for the map
  // then we could replace a different sidebar
  identifier?: string

  isVisible: boolean

  render: SidebarItemRenderProp
  // renderOverlay
  renderOverlay?: SidebarItemRenderProp

  contents: ReactNode
  setContents(contents: any): void
  setRender(renderProp: SidebarItemRenderProp): void

  // commonstate
  setIsVisible(isVisible: boolean): void
  handleHide(): void
  handleShow(): void
  handleToggle(): void
}