import React from 'react'
import { isSafe, isNumber, toBoolean, fromIshToNumber } from 'exotic'
import { toUrlWithProtocol } from '@skava/utils'
import Empty from 'atoms/Empty'
import { CarouselBullet } from './CarouselBullet'
import { CarouselArrow } from './CarouselArrow'
import { getCarouselPanelWidth } from './deps'
import {
  MediaCarouselProps,
  CarouselItemProps,
  MediaCarouselStateType,
} from './typings'
import {
  CarouselWrapper,
  CarouselPanel,
  ItemListPanel,
  ItemPanel,
  StyledImage,
  StyledBlink,
} from './styled'

function defaultRenderArrows(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  return <CarouselArrow {...props} state={state} />
}

function defaultRenderBullets(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  return <CarouselBullet {...props} state={state} />
}

function defaultRenderItem(
  item: CarouselItemProps,
  state: MediaCarouselStateType
) {
  const { src, itemHeight } = item
  const validSrc = toUrlWithProtocol(src)
  return <StyledImage src={validSrc} alt={validSrc} itemHeight={itemHeight} />
}

function defaultRenderList(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  const { renderItem, list, gridGap, itemHeight: oneItemHeight, ...remainingProps } = props
  const flexWidth = getCarouselPanelWidth({ list, ...remainingProps })
  const margin = isSafe(gridGap) && fromIshToNumber(gridGap)
  const itemHeight = fromIshToNumber(oneItemHeight)
  return list.map((item, index) => {
    return (
      <ItemPanel key={index} gridGap={margin} flexWidth={flexWidth}>
        {renderItem({ ...item, itemHeight }, state)}
      </ItemPanel>
    )
  })
}

function defaultRenderCarouselPanel(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  const {
    gridGap,
    hasArrows,
    hasBullets,
    renderList,
    renderArrows,
    renderBullets,
    ...remainingProps
  } = props
  const { translatePercentage } = state
  const { list } = props
  const margin = isNumber(gridGap) && fromIshToNumber(gridGap)
  const validHasArrows = toBoolean(hasArrows)
  const validHasBullets = toBoolean(hasBullets)
  const arrowView = (validHasArrows ? renderArrows(remainingProps, state) : <Empty />)
  const bulletsView = (validHasBullets ? renderBullets(remainingProps, state) : <Empty />)

  if (list && list.length > 0) {
    return (
      <React.Fragment>
        <CarouselPanel gridGap={margin}>
          <ItemListPanel translatePercentage={translatePercentage}>
            {renderList({ gridGap, ...remainingProps }, state)}
          </ItemListPanel>
          {arrowView}
        </CarouselPanel>
        {bulletsView}
      </React.Fragment>
    )
  } else {
    return <StyledBlink>There is no data to load!</StyledBlink>
  }
}

function defaultRenderWrapper(
  props: MediaCarouselProps,
  state?: MediaCarouselStateType
) {
  const { className, children } = props
  return <CarouselWrapper className={className}>{children}</CarouselWrapper>
}

export {
  defaultRenderArrows,
  defaultRenderItem,
  defaultRenderList,
  defaultRenderBullets,
  defaultRenderCarouselPanel,
  defaultRenderWrapper,
}