import React from 'react'
import { isArray } from 'exotic'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { TextPlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { ProductTableHeaderProps, HeaderItemProps } from './typings'
import { Container, Wrapper } from './styled'

function defaultRenderHeaderItem(item: HeaderItemProps, index: number) {
  const { width, align } = item
  return (
    <Container key={index} width={width} align={align}>
      <TextPlaceholder height={'12'} width={60} />
    </Container>
  )
}

function defaultRenderList(props: ProductTableHeaderProps) {
  const { list, renderHeaderItem, ...remainingProps } = props
  const listView = isArray(list) ? (
    list.map((item, index) => renderHeaderItem(item, index))
  ) : (
    <Empty />
  )
  return listView
}

function defaultRenderBox(props: ProductTableHeaderProps) {
  const { renderList, ...remainingProps } = props
  return renderList(remainingProps)
}

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

export {
  defaultRenderHeaderItem,
  defaultRenderList,
  defaultRenderBox,
  defaultRenderWrapper,
}