import React from 'react'
import { isSafe } from 'exotic'
import { TextPlaceholder } from 'atoms/Placeholder'
import StatusDetailCard from './StatusDetailCard'
import { SearchUser } from './Form/SearchUser'
import { UserStatusProps } from './typings'
import {
  UserLabel,
  HeaderWrapper,
  Wrapper,
} from './styled'

/* Search user form section */
function defaultRenderSearch(props: UserStatusProps) {
  return <SearchUser />
}

function defaultRenderStatusCard(props: UserStatusProps) {
  return <StatusDetailCard {...props} />
}

function defaultRenderTitle(props: UserStatusProps) {
  return (
    <UserLabel><TextPlaceholder width={'140'} height={'16'} /></UserLabel>
  )
}

function defaultRenderBox(props: UserStatusProps) {
  const {
    renderTitle,
    renderSearch,
    renderStatusCard,
    list,
    ...remainingProps
  } = props
  const titleView = renderTitle(remainingProps)
  const searchView = renderSearch(remainingProps)
  const statusView = isSafe(list) && list.map((item, index) => renderStatusCard({ item, ...remainingProps }))
  return (
    <React.Fragment>
      <HeaderWrapper>
        {titleView}
        {searchView}
      </HeaderWrapper>
      {statusView}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: UserStatusProps) {
  const { className, children, dataQa } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': dataQa
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderTitle,
  defaultRenderSearch,
  defaultRenderBox,
  defaultRenderWrapper,
  defaultRenderStatusCard,
}