import React from 'react'
import { isArray } from 'exotic'
import { TextPlaceholder } from '@skava/ui/dist/components/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 =
    isArray(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,
}