import React from 'react';
import { Col ,Row , Input} from 'react-materialize';
import Modularity from 'modularity-front';
import InputRange from 'react-input-range';
import 'react-input-range/lib/css/index.css';
import './Filter.css';
const Module = Modularity.Module;


class RangeFilter extends Modularity.Module {
	constructor(props){
		super(props);
    this.state = {
      ...props.filter
    };

    let r = function()  {
      this.value = {min: this.options[0], max: this.options[1]};
    };
    this.filter.onUpdate((f) => {
      f.reset = r.bind(f);
    });
    this.filter.value.reset = r.bind(this.filter.value);
  }



	checkFilter = (value) =>{
    let options = [value.min,value.max];
    this.filter.value.value = value;
    this.forceUpdate();
    if(!this._timer) {
      this._timer = setTimeout((e) => {
        let value = this.filter.value.value;
        this.Filters.set({ ...this.filter.value, values: [value.min, value.max]});
        this._timer = undefined;
      },this.refreshTime.value || 0);
    }
  }

	render(){
    const filter  = this.filter.value;
    if(!filter.value) filter.reset();
    const options = filter.options || [0,100];
		return(
			<div className="flex-item">
          <Row style={{paddingBottom: 8}}>
            <Col s = {12}>
            {this.filter.value.name}
            </Col>
          </Row>
          <Row>
            <Col s = {12} style={{padding: "20px 20px"}}>
             <InputRange
              minValue={options[0]}
              maxValue={options[1]}
              value={filter.value}
              onChange={value => this.checkFilter(value)} />
            </Col>
          </Row>
       </div>
			)
	}
}

RangeFilter.Inputs = {
      filter:{
        type:Module.Types.Object,

      },
      refreshTime: {
        type: Module.Types.Number
      }
}

RangeFilter.Outputs = {
      Filters:{

      }
}
RangeFilter.Category = 'sxoinas'





export default RangeFilter;
