import React from 'react'
import { fromIshToNumber } from 'exotic'
import { CarouselArrowProps } from './typings'
import { MediaCarouselStateType } from '../typings'
import {
  NavigationIcon,
  NavigationArrow,
  LeftNavigationIconWrapper,
  RightNavigationIconWrapper,
} 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'}
      >
        <LeftNavigationIconWrapper>
          <NavigationIcon
            type={'left'}
            arrowIconColor={arrowIconColor}
            arrowIconSize={formatedArrowIconSize}
          />
        </LeftNavigationIconWrapper>
      </NavigationArrow>

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

export { defaultRenderArrows }