import React from 'react';
import ReactSlider from 'rc-slider';
import PropTypes from 'prop-types';
import CustomStyles from './styles.js';
import './styles.scss';

function Marks(marks) {
    return marks.reduce((acc, currentMark) => {
        const markStyles = currentMark.markStyles ? currentMark.markStyles : {};
        const styles = currentMark.styles ? currentMark.styles : {};
        acc[currentMark.dot] = {
            label: (
                <div className="Slider__mark" style={markStyles}>
                    {currentMark.text ? <div className="Slider__mark-text" style={styles}>{currentMark.text}</div> : null}
                    {currentMark.label}
                </div>
            ),
            style: {
                marginLeft: '0',
                width: 'auto',
                transform: 'translateX(-50%)',
            },
        };
        return acc;
    }, {});
}

function Slider(props) {
    const marks = props.marks.length ? Marks(props.marks) : null;

    return (
        <div className="Slider">
            <ReactSlider
                min={props.min}
                max={props.max}
                step={props.step}
                value={props.value}
                onChange={props.onChange}
                marks={marks}
                {...CustomStyles}
            />
        </div>
    );
}

Slider.propTypes = {
    min: PropTypes.number,
    max: PropTypes.number.isRequired,
    step: PropTypes.number,
    value: PropTypes.number.isRequired,
    marks: PropTypes.arrayOf(PropTypes.shape({
        dot: PropTypes.number.isRequired,
        label: PropTypes.string.isRequired,
        text: PropTypes.string,
        styles: PropTypes.object,
    })),
    onChange: PropTypes.func,
};

Slider.defaultProps = {
    min: 0,
    step: 1,
    marks: [],
    onChange: (value) => value,
};

export default Slider;