import React from 'react'
import { isArray } from 'exotic'
import { GridTemplateProps, GridLayout, GridItem } from './typings'
import { StyledComponent, StyledRow, StyledGrid, StyledWrapper } from './styled'

const renderGridComponent = (item: GridItem) => {
  const {
    gridGap,
    desktopColSpan,
    tabletColSpan,
    mobileColSpan,
    index,
    backgroundColor,
    colSpan,
    component,
  } = item
  const gridComponentView = (
    <StyledGrid
      desktopColSpan={desktopColSpan}
      tabletColSpan={tabletColSpan}
      mobileColSpan={mobileColSpan}
      order={index}
      gridGap={gridGap}
      gridColSpan={colSpan}
    >
      <StyledComponent backgroundColor={backgroundColor}>
        {component}
      </StyledComponent>
    </StyledGrid>
  )
  return gridComponentView
}

const renderGridRow = (item: GridLayout) => {
  const {
    direction,
    gridGap,
    shouldWrap,
    desktopColSpan,
    tabletColSpan,
    mobileColSpan,
    backgroundColor,
    componentList,
  } = item
  const desktopColSpanPercentage = 100 / (desktopColSpan ? desktopColSpan : 3)
  const tabletColSpanPercentage = 100 / (tabletColSpan ? tabletColSpan : 2)
  const mobileColSpanPercentage = 100 / (mobileColSpan ? mobileColSpan : 1)
  const passthroughProps = {
    gridGap,
    desktopColSpan: desktopColSpanPercentage,
    tabletColSpan: tabletColSpanPercentage,
    mobileColSpan: mobileColSpanPercentage,
  }
  const renderComponentView =
    isArray(componentList) &&
    componentList.map((items, index) =>
      renderGridComponent({ ...passthroughProps, ...items, index })
    )
  const gridRowView = (
    <StyledRow
      shouldWrap={shouldWrap}
      gridGap={gridGap}
      backgroundColor={backgroundColor}
      direction={direction}
    >
      {renderComponentView}
    </StyledRow>
  )
  return gridRowView
}

function defaultRenderBox(props: GridTemplateProps) {
  const { list } = props
  const view = isArray(list) && list.map(renderGridRow)
  return view
}

function defaultRenderWrapper(props: GridTemplateProps) {
  const { className, children, dataQa } = props
  return (
    <StyledWrapper className={className} data-qa={dataQa}>
      {children}
    </StyledWrapper>
  )
}

export { defaultRenderBox, defaultRenderWrapper }