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

function defaultRenderComponent(props: ImageComponentProps) {
  const { src, alternateText } = props
  const imageSrc =
    src !== '' ? src : 'https://reactdemo.skavaone.com/images/null_image.png'
  return <StyledFigure src={imageSrc} alt={alternateText} />
}

function defaultRenderBox(props: GridTemplateProps) {
  const {
    direction,
    gridGap,
    shouldWrap,
    desktopColSpan,
    tabletColSpan,
    mobileColSpan,
    backgroundColor,
    list,
    renderComponent,
  } = props
  const desktopColSpanPercentage = 100 / desktopColSpan
  const tabletColSpanPercentage = 100 / tabletColSpan
  const mobileColSpanPercentage = 100 / mobileColSpan
  const renderComponentView =
    isArray(list) &&
    list.map((items, index) => {
      return (
        <StyledGrid
          key={index}
          desktopColSpan={desktopColSpanPercentage}
          tabletColSpan={tabletColSpanPercentage}
          mobileColSpan={mobileColSpanPercentage}
          order={index}
          gridGap={gridGap}
          gridColSpan={items.colSpan}
          direction={direction}
        >
          <StyledComponent backgroundColor={backgroundColor}>
            {renderComponent({ ...items, index })}
          </StyledComponent>
        </StyledGrid>
      )
    })
  const gridRowView = (
    <StyledRow
      shouldWrap={shouldWrap}
      gridGap={gridGap}
      backgroundColor={backgroundColor}
      direction={direction}
    >
      {renderComponentView}
    </StyledRow>
  )
  return gridRowView
}

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

export { defaultRenderComponent, defaultRenderBox, defaultRenderWrapper }