import React, { StatelessComponent } from 'react';

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

import ProgressControls from './progress-controls';
import DirectionalControls from './directional-controls';

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

const getSliderControls = (layoutId: MULTI_IMAGE | HERO_MULTI | PRODUCT_LIST): React.ReactNode => {
  switch(layoutId) {
    case MULTI_IMAGE.BEGONIA_DEFAULT: return ProgressControls;
    case MULTI_IMAGE.COSMOS_SLIDER: return DirectionalControls;
    case HERO_MULTI.COSMOS_DEFAULT: return DirectionalControls;
    case PRODUCT_LIST.BEGONIA_TRIPLE: return ProgressControls;
    case PRODUCT_LIST.COSMOS_PRODUCTS_LEFT: return DirectionalControls;
    case PRODUCT_LIST.COSMOS_PRODUCTS_RIGHT: return DirectionalControls;
  }
  return ProgressControls;
}

const SliderControls: StatelessComponent<SliderControlsProps> = (props): JSX.Element => {
  const { layoutId } = props;
  const Controls: any = getSliderControls(layoutId!);
  return <Controls {...props} />
}

export default SliderControls;