import React from 'react';
import { Col ,Row , Input} from 'react-materialize';
import Modularity from 'modularity-front';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import './Filter.css';
const Module = Modularity.Module;


class ExactFilter extends Modularity.Module {
	constructor(props){
		super(props);
  }

	checkFilter(value) {
    let values = this.filter.value.values || [];
    let indx = values.indexOf(value);
    indx > -1 ? values.splice(indx,1) : values.push(value);
    this.Filters.set({...this.filter.value,values});
  }

	render(){

		const horizontal = this.horizontal.value;
    const Filter = this.filter.value;
    let options;
    if (Filter.options){ // if json make values the keys of json and labels the values of json
        let array = Object.keys(Filter.options || {})
        options = array.map((key,index)=>
          <Option value={key} label={Filter.options[key]} 
          checked={(Filter.values || []).includes(key)}
          onChange={(v) => this.checkFilter(v)} key={index} />
        )
    }

		return(
			horizontal ? (
				<div className="flex-item exact">
					<div className="exact-header">{Filter.name}</div>
					<div className="exact-content">
						{options}
					</div>
				</div>
			):(
				<div className="flex-item exact">
	          <Row style={{paddingBottom: 8}}>
              <Col>
	             {Filter.name}
              </Col>
	          </Row>
            <div>
	            {options}
           </div>
	       </div>
			)

			)
	}
}

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

      },
			horizontal:{
				type:Module.Types.Boolean,
				defaultValue:false
			}
}

ExactFilter.Outputs = {
      Filters:{

      }
}
ExactFilter.Category = 'sxoinas'


class Option extends React.Component {
  constructor(props){
        super(props)
        this.state = {
          checked:false
        }
  }

  oncheck = (e) => {
      this.props.onChange(this.props.value);
  }

  render(){
    return(
      <div>
      <FormControlLabel
        control={
          <Checkbox color="primary" checked={this.props.checked} onChange={() => this.oncheck()} value={this.props.value} />
        }
        label={this.props.label}
        />
      </div>
      )
  }
}


export default ExactFilter;
