import React from 'react'
import { SnackBarWrapper, Message } from './styled'
import { SnackBarProps, SnackBarState } from './typings'

export function defaultRenderMessage(
  props: SnackBarProps,
  state: SnackBarState
) {
  const { label } = props
  return label && <Message text={label} />
}
export function defaultRenderActionButtons(
  props: SnackBarProps,
  state: SnackBarState
) {
  return ''
}

/**
 * @todo there is accessibility required on this
 * @todo or this has to be an observer...
 */
export function defaultRenderWrap(props: SnackBarProps, state: SnackBarState) {
  console.debug('[SnackBar] _defaultRenderWrap')

  return (
    <SnackBarWrapper
      position={props.position}
      className={props.className}
      isVisible={state.isVisible}
    >
      {props.children}
    </SnackBarWrapper>
  )
}

export function renderChildren(props: SnackBarProps, state?: SnackBarState) {
  const {
    renderMessage,
    renderActionButtonGroup,
    renderWrap,
    ...remainingProps
  } = props

  const messageView = renderMessage(props)
  const actionButtonView = renderActionButtonGroup(props)

  // shouldn't need this, except we can handle accessibility
  const children = (
    <React.Fragment>
      {messageView}
      {actionButtonView}
    </React.Fragment>
  )

  return children
}