import React from 'react'
import { Overlay } from 'atoms/Overlay'
import { SidebarItemProps } from './typings'
import { SidebarItemState } from './State'
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} />
}