import React from 'react';
import Slider from 'rc-slider';
import pick from 'lodash.pick';
import clamp from 'lodash.clamp';

const Input = ({ value, onChange, name }) => {
  return (
    <input
      className='o-kd-autocomplete c-kd-slider__input'
      name={name}
      type='text'
      value={value}
      onChange={onChange}
    />
  );
};

class KdSlider extends React.Component {
  constructor(props) {
    super(props);

    this.prepareSlider(props);
    this.onSliderChange = this.onSliderChange.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
  }

  componentDidMount() {
    this.props.onSelectedValue(this.state.sliderValues);
  }

  prepareSlider() {
    const { min, max, values } = this.props;

    const oneThirdSlider = Math.floor((max - min) / 3);
    const start = values[0] || oneThirdSlider;
    const end = values[1] || oneThirdSlider * 2;

    this.state = { start, end, sliderValues: [start, end] };
  }

  onSliderChange(sliderValues) {
    this.props.onSelectedValue(sliderValues);
    this.setState({ start: sliderValues[0], end: sliderValues[1], sliderValues });
  }

  onInputChange({ target }) {
    const { value, name } = target;
    const nextState = Object.assign({}, this.state, { [name]: value });
    const sliderValues = this.safetyValues(nextState);

    this.props.onSelectedValue(sliderValues);
    this.setState({ [name]: value, sliderValues });
  }

  safetyValues({ start, end, sliderValues }) {
    let newStart = this.clampSliderValue(start);
    const newEnd = this.clampSliderValue(end);

    if(newStart > newEnd) {
      newStart = newEnd;
    }

    return (newStart && newEnd) ? [newStart, newEnd] : sliderValues;
  }

  clampSliderValue(value) {
    return clamp(value, this.props.min, this.props.max);
  }

  render() {
    const { start, sliderValues, end } = this.state;
    return (
      <div>
        <Input
          value={start}
          onChange={this.onInputChange}
          name={'start'}
        />
        <Slider
          range
          allowCross={false}
          onChange={this.onSliderChange}
          value={sliderValues}
          min={this.props.min}
          max={this.props.max}
        />
        <Input
          value={end}
          onChange={this.onInputChange}
          name={'end'}
        />
      </div>
    );
  }
};

KdSlider.defaultProps = {
  min: 0,
  max: 100,
  values: []
};

export default KdSlider;
