{"size": 1731, "ext": "js", "max_stars_repo_path": "ui/client/src/components/ForecastSlider/ForecastSlider.js", "max_stars_repo_name": "haroon225/mixed-migration-forecasting", "max_stars_repo_stars_event_min_datetime": "2018-09-24T18:00:01.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-03T16:39:21.000Z", "max_issues_repo_path": "ui/client/src/components/ForecastSlider/ForecastSlider.js", "max_issues_repo_name": "haroon225/mixed-migration-forecasting", "max_issues_repo_issues_event_min_datetime": "2020-08-14T14:10:57.000Z", "max_issues_repo_issues_event_max_datetime": "2020-08-14T15:41:03.000Z", "max_forks_repo_path": "ui/client/src/components/ForecastSlider/ForecastSlider.js", "max_forks_repo_name": "haroon225/mixed-migration-forecasting", "max_forks_repo_forks_event_min_datetime": "2019-11-02T06:18:58.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-09T01:42:37.000Z"}
{"max_stars_count": 7, "max_issues_count": 1, "max_forks_count": 11, "avg_line_length": 22.4805194805, "max_line_length": 79, "alphanum_fraction": 0.5811669555}
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';
// import Input from '@material-ui/core/Input';

const useStyles = makeStyles({
  input: {
    width: 42,
  },
  slider: {
    padding: 24,
    margin: '0 auto',
  },
});

const marks = [
  {
    value: 0,
    label: 'worse',
  },
  {
    value: 25,
    label: 'poor',
  },
  {
    value: 50,
    label: 'average',
  },
  {
    value: 75,
    label: 'good',
  },
  {
    value: 100,
    label: 'best',
  },
];

function valueLabelFormat(value, tempMarks) {
  const targetValue = tempMarks.find(mark => mark.value === value);
  return targetValue ? targetValue.label : 'poor';
}

const ForecastSlider = props => {
  const classes = useStyles();
  const { value, handleChange, tempMarks } = props;
  const handleSliderChange = (event, newValue) => {
    handleChange(valueLabelFormat(newValue, tempMarks));
  };

  return (
    <div className={classes.root}>
      <Typography gutterBottom id="input-slider">
        {props.title}
      </Typography>
      {tempMarks.length > 0 ? (
        <Grid alignItems="center" container justify="space-between">
          <Grid className={classes.slider} item xs={12}>
            <Slider
              defaultValue={tempMarks.find(mark => mark.label === value).value}
              marks={tempMarks}
              onChange={handleSliderChange}
              step={25}
              style={{ color: '#cc051f' }}
              valueLabelDisplay="off"
            />
          </Grid>
        </Grid>
      ) : null}
    </div>
  );
};

export default ForecastSlider;
