import React from 'react'
import { fromIshToNumber } from 'exotic'
import { CarouselArrowProps } from './typings'
import { MediaCarouselStateType } from '../typings'
import { NavigationIcon, NavigationArrow } from './styled'

function defaultRenderArrows(
  props: CarouselArrowProps,
  state: MediaCarouselStateType
) {
  const { arrowIconColor, arrowIconSize } = props
  const {
    toNext,
    toPrevious,
    hasPreviousSlide,
    hasNextSlide,
  } = state
  const formatedArrowIconSize = fromIshToNumber(arrowIconSize)
  return (
    <React.Fragment>
      <NavigationArrow
        align={'left'}
        key={'left'}
        onClick={toPrevious}
        isActive={hasPreviousSlide}
        tabindex={1}
        aria-label={hasPreviousSlide ? 'Previous slide' : 'This is the first slide'}
      >
        <NavigationIcon
          type={'left'}
          arrowIconColor={arrowIconColor}
          arrowIconSize={formatedArrowIconSize}
        />
      </NavigationArrow>

      <NavigationArrow
        align={'right'}
        key={'right'}
        onClick={toNext}
        isActive={hasNextSlide}
        tabindex={1}
        aria-label={hasNextSlide ? 'Next slide' : 'This is the last slide'}
      >
        <NavigationIcon
          type={'right'}
          arrowIconColor={arrowIconColor}
          arrowIconSize={formatedArrowIconSize}
        />
      </NavigationArrow>
    </React.Fragment>
  )
}

export { defaultRenderArrows }