import React from 'react'
import {
  isSafe,
  isNumber,
  toBoolean,
  fromIshToNumber,
  isNonEmptyArray,
} 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,
  ItemNavigation,
  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) => {
    const { navigationUrl, ...remainingItemProps } = item
    const itemView = navigationUrl ? (
      <ItemNavigation href={navigationUrl}>
        {renderItem({ ...remainingItemProps, itemHeight, index }, state)}
      </ItemNavigation>
    ) : (
      renderItem({ ...remainingItemProps, itemHeight, index }, state)
    )

    return (
      <ItemPanel key={index} gridGap={margin} {...remainingProps}>
        {itemView}
      </ItemPanel>
    )
  })
}

function defaultRenderCarouselPanel(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  const {
    gridGap,
    hasArrows,
    hasBullets,
    renderList,
    renderArrows,
    renderBullets,
    handleArrowNavigation,
    swipingAttributes = {},
    ...remainingProps
  } = props
  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 (isNonEmptyArray(list) === true) {
    return (
      <React.Fragment>
        <CarouselPanel tabIndex={0} onKeyDown={handleArrowNavigation}>
          <ItemListPanel {...swipingAttributes}>
            {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,
}