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>}
          {currentMark.label}
        </div>
      ),
      style: {
        marginLeft: '0',
        width: 'auto',
        transform: 'translateX(-50%)',
      },
    };
    return acc;
  }, {});
}

function Slider(props) {
  const {
    marks,
    min,
    max,
    step,
    value,
    onChange,
  } = props;

  return (
    <div className="Slider">
      <ReactSlider
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={onChange}
        marks={marks.length ? Marks(marks) : null}
        {...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;