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

const n = createNamespace('SlickSlider');

export const renderSliderArrow = (props, buttonProps) => {
    const { className, ...slickArrowProps } = props;

    return (
        <div {...slickArrowProps} {...n('arrowWrapper').withClass(className).withTestId().props}>
            <ButtonIcon {...buttonProps} />
        </div>
    );
};

export const SamplePrevArrow = ({ i18n, ...slickArrowProps }) => {
    const { className } = slickArrowProps;

    return renderSliderArrow(slickArrowProps, {
        ...n('arrow', 'prev').props,
        icon: 'caretLeft',
        iconClass: n('caret', 'left').props.className,
        hiddenText: true,
        disabled: getDisabledState(className),
        children: i18n.previous
    });
};

export const SampleNextArrow = ({ i18n, ...slickArrowProps }) => {
    const { className } = slickArrowProps;

    return renderSliderArrow(slickArrowProps, {
        ...n('arrow', 'next').props,
        icon: 'caretRight',
        iconClass: n('caret', 'right').props.className,
        hiddenText: true,
        disabled: getDisabledState(className),
        children: i18n.next
    });
};

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

    const i18nWithDefaults = { ...SlickSlider.defaultProps.i18n, ...i18n };

    const sliderProps = {
        ...SlickSlider.defaultProps.settings,
        prevArrow: <SamplePrevArrow i18n={i18nWithDefaults} />,
        nextArrow: <SampleNextArrow i18n={i18nWithDefaults} />,
        ...settings
    };

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

SlickSlider.propTypes = {
    i18n: PropTypes.shape({
        next: PropTypes.string,
        previous: PropTypes.string
    }),
    settings: PropTypes.shape({
        draggable: PropTypes.bool,
        infinite: PropTypes.bool,
        arrows: PropTypes.bool,
        dots: PropTypes.bool,
        prevArrow: PropTypes.element,
        nextArrow: PropTypes.element
    })
};

SlickSlider.defaultProps = {
    i18n: {
        next: 'Next',
        previous: 'Previous'
    },
    settings: {
        draggable: false,
        infinite: false,
        arrows: true,
        dots: true
    }
};

export default SlickSlider;
