import React, { FunctionComponent } from 'react'

import hexToRgba from 'hex-rgba'

import Icon from 'components/icon'

import { ICON_NAMES } from 'utils/constants/assets'

import ProgressBar from './components/progress-bar'
import { ProgressBarOrientation } from './components/progress-bar.types';

import * as BegoniaGalleryStyles from './styles/begonia/slider-controls.begonia-gallery.styles'
import * as BegoniaProductListStyles from './styles/begonia/slider-controls.begonia-product-list.styles'
import * as DefaultStyles from './styles/slider-controls-default.styles'

import { SliderControlsProps } from '../slider-controls.types'

import { PRODUCT_LIST, MULTI_IMAGE } from 'utils/constants/layouts-names'

import { getTheme } from 'utils/styles/style-config-factory'

const SliderControls: FunctionComponent<SliderControlsProps> = (props) => {
  const { currentSlide, maxSlides, onNext, onPrevious, layoutId, orientation, colour } = props
  const Styles = getTheme({
    default: DefaultStyles,
    layoutThemes: [
      { layoutId: PRODUCT_LIST.BEGONIA_TRIPLE, theme: BegoniaProductListStyles },
      { layoutId: MULTI_IMAGE.BEGONIA_DEFAULT, theme: BegoniaGalleryStyles }
    ]
  }, layoutId)
  return (
    <Styles.ControlsContainer>
      <Styles.ProgressContainer>
        <Styles.SliderNumberText colour={colour}>{currentSlide}</Styles.SliderNumberText>
          <ProgressBar
            orientation={orientation!}
            bgColor={hexToRgba(colour, 0.3 * 100)}
            progressColor={colour}
            progress={currentSlide / maxSlides}
          />
      <Styles.SliderNumberText colour={colour}>{maxSlides}</Styles.SliderNumberText>
      </Styles.ProgressContainer>
      <Styles.IconContainer colour={colour}>
        <Icon
          iconName={orientation === ProgressBarOrientation.HORIZONTAL ? ICON_NAMES.ARROW_LEFT : ICON_NAMES.ARROW_UP}
          styles={Styles.Icon}
          onClick={orientation === ProgressBarOrientation.HORIZONTAL ? onPrevious : onPrevious}
          />
        <Icon
          iconName={orientation === ProgressBarOrientation.HORIZONTAL ? ICON_NAMES.ARROW_RIGHT : ICON_NAMES.ARROW_DOWN}
          styles={Styles.Icon}
          onClick={orientation === ProgressBarOrientation.HORIZONTAL ? onNext : onNext}
        />
      </Styles.IconContainer>
    </Styles.ControlsContainer>
  )
}

export default SliderControls