import React from 'react'
import { isArray } from 'exotic'
import { application } from '@skava/state'
import { keep } from '@skava/utils'
import Blink from '@skava/ui/dist/components/atoms/Blink'
import { FlexBoxTemplateProps } from './typings'
import {
  FlexBoxItem,
  ItemPlaceholder,
  FlexBoxContainer,
  FlexBoxWrapper,
} from './styled'

const FLEX_CONTAINER_PROPS = Object.freeze([
  'flexWrap',
  'direction',
  'justifyContent',
  'alignItems',
])

const FLEX_ITEM_CSS_PROPS = Object.freeze([
  'order',
  'grow',
  'shrink',
  'basis',
  'align'
])

function defaultRenderItem(props: FlexBoxTemplateProps) {
  const { item } = props
  return <ItemPlaceholder>{item}</ItemPlaceholder>
}

function defaultRenderList(props: FlexBoxTemplateProps) {
  const {
    list,
    shouldAdapt,
    gridGap,
    direction,
    renderItem,
    ...remainingProps
  } = props
  const containerProps = keep(remainingProps, FLEX_CONTAINER_PROPS)
  const { flexWrap } = containerProps
  const currentDeviceName = application.deviceType
  const columnCount = remainingProps[currentDeviceName + 'Column']
  const itemWidth = (shouldAdapt ? 'auto' : (100 / columnCount) + '%')

  const flexItemCSSProps = keep(remainingProps, FLEX_ITEM_CSS_PROPS)
  const grow = ((shouldAdapt === true && flexWrap === 'wrap') ? 1 : 0)
  const itemProps = {
    itemWidth,
    grow,
    gridGap,
    direction,
    shouldAdapt,
    ...flexItemCSSProps,
  }

  const view = isArray(list)
    ? list.map((item, index) => {
      return (
        <FlexBoxItem key={index} {...itemProps}>
          {renderItem({ index, item, ...remainingProps })}
        </FlexBoxItem >
      )
    })
    : <Blink>There is no item to load!</Blink>

  return <FlexBoxContainer direction={direction} flexWrap={flexWrap} {...containerProps}>{view}</FlexBoxContainer>
}

function defaultRenderWrapper(props: FlexBoxTemplateProps) {
  const { className, children } = props
  return <FlexBoxWrapper className={className}>{children}</FlexBoxWrapper>
}

export {
  defaultRenderItem,
  defaultRenderList,
  defaultRenderWrapper
}