import React from 'react';
import $ from 'jquery';
import 'jquery-ui/ui/widgets/slider';
import './scss/slider.scss';

export default class Slider extends React.Component {
  static defaultProps = {
    onChange: () => null,
    min: 0,
    max: 100,
    value: 0,
    orientation: 'horizontal',
  }

  constructor(props) {
    super(props);

    this.state = {
      range: Array.isArray(props.value),
      valueOptionName: Array.isArray(props.value) ? 'values' : 'value',
      min: props.min,
      max: props.max,
      orientation: props.orientation,
      step: props.step,
      value: props.value,
      disabled: props.disabled,
    };
  }


  rangeRef

  componentDidMount() {
    const { range, min, max, orientation, value, valueOptionName, disabled, step } = this.state;
    $(this.rangeRef).slider({
      disabled,
			range,
			min,
      max,
      orientation,
      step,
			[valueOptionName]: value,
			slide: this.handleSlide,
			change: this.handleChange,
		});
  }

  handleSlide = (event, ui) => {
    const { valueOptionName } = this.state;
    const value = ui[valueOptionName];
    this.setState({ value });
    this.props.onSlide(value);
  }

  handleChange = (event, ui) => {
    const { valueOptionName } = this.state;
    this.props.onChange(ui[valueOptionName]);
  }


  render() {
    const { range, value, min, max, orientation } = this.state;
    const position = (max - min) / 100 * value;
    const rangeStyle = orientation === 'horizontal'
      ? {left: '0%', width: `${position}%`}
      : {bottom: '0%', height: `${position}%`}
  
    return (
      <div className='omni-ui-general omni-slider' >
        <div className='omni-slider__value'>

        </div>
        <div
          className='omni-slider__slider'
          ref={ref => this.rangeRef = ref}
        >
          {!range && (
            <div 
              className='ui-slider-range ui-corner-all ui-widget-header'
              style={rangeStyle} 
            />
            )}
        </div>
      </div>
    );
  }
}