import React from 'react';
import PropTypes from 'prop-types';
import Slick from 'react-slick';
import { createNamespace } from '../../tools/namingTools';
import ButtonIcon from '../button-icon/ButtonIcon';
import './styles/SlickSlider.scss';

const n = createNamespace('SlickSlider');

const defaultPrevArrow = (
    <div>
        <ButtonIcon
            icon="caretLeft"
            extraClass={n('arrow', 'prev').props.className}
            iconClass={n('caret', 'left').props.className}
        />
    </div>
);

const defaultNextArrow = (
    <div>
        <ButtonIcon
            icon="caretRight"
            extraClass={n('arrow', 'next').props.className}
            iconClass={n('caret', 'right').props.className}
        />
    </div>
);

const SlickSlider = ({
    children,
    settings
}) => {
    if (!children) {
        return null;
    }

    const sliderProps = {
        ...SlickSlider.defaultProps.settings,
        ...settings
    };

    return (
        <div {...n('wrapper').withTestId().props}>
            <Slick {...sliderProps}>
                {children}
            </Slick>
        </div>
    );
};

SlickSlider.propTypes = {
    settings: PropTypes.shape()
};

SlickSlider.defaultProps = {
    settings: {
        draggable: false,
        infinite: false,
        arrows: true,
        dots: true,
        prevArrow: defaultPrevArrow,
        nextArrow: defaultNextArrow
    }
};

export default SlickSlider;
