import React, { useState } from "react";
import PropTypes from "prop-types";
import Slider from "@material-ui/lab/Slider";
import { withStyles } from "@material-ui/core/styles";

const PaddedSlider = withStyles({
  container: {
    padding: "25px 0",
    //overflowX: "hidden" // See: https://github.com/mui-org/material-ui/issues/14234
  },
  track: { height: "4px" },
  thumb: { width: "16px", height: "16px" }
})(Slider);

const FormFieldSlider = props => {
  const [value, setValue] = useState(props.value);

  const update = (evt, newValue) => {
    props.updateValue(props.name, newValue, evt);
    setValue(newValue);
  };

  // Force state update when rerendering due to props change
  if (props.value !== value) setValue(props.value);

  return (
    <PaddedSlider
      value={value}
      min={props.min}
      max={props.max}
      step={props.step}
      onChange={update}
      onDragEnd={update}
      classes={{
        track: "slider-track",
        thumb: "slider-thumb"
      }}
      aria-labelledby={props.label}
    />
  );
};

FormFieldSlider.propTypes = {
  min: PropTypes.number,
  max: PropTypes.number,
  step: PropTypes.number,
  updateValue: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])])
};

FormFieldSlider.defaultProps = {
  min: 0,
  max: 100,
  step: 0.1,
  label: false
};

export default FormFieldSlider;