import React from 'react';
import { Settings } from 'react-slick';

// Slick Default Styling
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

import CustomArrow from './custom-arrow';
import * as Styles from './styled-carousel.styles';
import { StyledCarouselProps } from './styled-carousel.types';

const mergeSettings = (overrides: Settings, arrowOffset: number | boolean, iconColour: string): Settings => ({
  arrows: true,
  infinite: true,
  speed: 500,
  responsive: [
    {
      breakpoint: 600,
      settings: {
        dots: true,
        arrows: false
      }
    }
  ],
  prevArrow: <CustomArrow direction="previous" arrowOffset={arrowOffset} iconColour={iconColour}  />,
  nextArrow: <CustomArrow direction="forward" arrowOffset={arrowOffset} iconColour={iconColour} />,
  ...overrides
});

const StyledCarousel = (props: StyledCarouselProps): JSX.Element => (
  <Styles.SliderWithStyles
    className={props.className}
    iconColour={props.iconColour}
    {...mergeSettings(props.settings, props.arrowOffset, props.iconColour)}
  >
    {props.children}
  </Styles.SliderWithStyles>
);

StyledCarousel.defaultProps = {
  settings: {}
};

export default StyledCarousel;