import React from 'react'
import { Overlay } from 'atoms/Overlay'
import { SidebarItemProps } from './typings'
import { SidebarItemState } from './SidebarItemState'
import { SidebarItem } from './SidebarItem'
import { StylehSidebarItem } from './styled'

export function renderStyledSidebar(
  props: SidebarItemProps,
  state?: SidebarItemState
) {
  return <StylehSidebarItem {...props} />
}

// is responsibility of the group
export function renderOverlay(
  props: SidebarItemProps,
  state: SidebarItemState
) {
  console.debug('[Sidebar] renderOverlay (default)')

  // onClick = this.state.hideSidebar()
  const { handleToggle } = state
  // || state?
  const { isVisible } = props

  return <Overlay key="o" onClose={handleToggle} isVisible={isVisible} />
}

// renderAnimation?
export function renderSidebarItem(
  props: SidebarItemProps,
  state: SidebarItemState
) {
  console.debug('[Sidebar] renderSidebarItem (default)')

  const { className, isVisible, children } = props
  const { handleToggle, identifier } = state

  // @todo !!!
  // const renderOverlayProp = state.renderOverlay
  const overlayView = renderOverlay(props, state)

  return (
    <React.Fragment>
      {overlayView}
      <SidebarItem id={identifier} className={className} isVisible={isVisible}>
        {children}
      </SidebarItem>
    </React.Fragment>
  )
}

// move to renderProps?
export function defaultSidebarRender(
  itemAsProps: SidebarItemProps | SidebarItemState
) {
  console.debug('[Sidebar] defaultSidebarRender')
  return <SidebarItem {...itemAsProps} />
}