import React, {component} from 'react';
import { Row ,Col } from 'react-materialize';
import Modularity from 'modularity-front';
import  ExactFilter from './UserInputs/ExactFilter';
import  SearchFilter from './UserInputs/SearchFilter';
import RangeFilter from './UserInputs/RangeFilter';
import DropdownFilter from './UserInputs/DropdownFilter';
import './FilterModule.css';
import Divider from '@material-ui/core/Divider';

import Dictionary from '../Services/DictionaryService';

const Module = Modularity.Module;

class FilterModule extends Modularity.Module{
	constructor(props){
		super(props);
		this.state = {
			filters: []
		}
	 }

	 setFilters(filter){
		let fils = this.Inputs.value || [];
		let flag = false;
		let indx;
		fils = fils.map((item,index) => {
			if(item.name === filter.name){
				indx = index;
				flag = true;
				return filter;
			}
			return item;
	 	});
	 	if(flag === false){ // should not happen
	 		fils.push(filter)
	 	}
	 	if(filter.values){
	 		if(filter.values[0] === "None"){
		 		filter.values = [];
		 	}
		 	if(filter.type === "range") {
		 		if (filter.options[0] === filter.values[0] && filter.options[1] === filter.values[1]) {
		 			delete filter.values;
		 		}
		 	}
	 	}

	 	setTimeout(() => this.setState({filters:fils}),10);
	 	this.Filters.set(fils);

	}

	render(){
		const filters = this.Inputs.value.map((filter,index) => {
			switch(filter.type){
				case 'exact':
				case 'manytomany':
				case 'onetoone':
					return <ExactFilter Filters={(filters) => this.setFilters(filters)} filter={filter} key={index}/>
				case 'search':
					return <SearchFilter Filters={(filters) => filters ?  this.setFilters(filters) : null } filter={filter} key={index}/>
				case 'range':
					return <RangeFilter Filters={(filters) => filters ?  this.setFilters(filters) : null } filter={filter} key={index} refreshTime={500} />;
				case 'select':
					return <DropdownFilter Filters={(filters) => filters ?  this.setFilters(filters) : null } filter={filter} key={index} />
			}
		})

		return(
      <Row className={"FilterModule " + (this.props.className || "filter_layout")} style={this.props.style}>
      	<Col s={12}>
      		<div className="filters-title">{Dictionary.get("Filters")}</div>
      		<Divider />
      		{super.render()}
      	</Col>
      	<Col s={12} className={"flex-container"}>
      		{filters.map((f,i) => 
      			<Row key={i}>
      				<Col s={12}>
  						{f}
      				</Col>
      			</Row>
      		)}
      	</Col>
      </Row>
			)
		}
	}

FilterModule.EditPosition = "center";
FilterModule.Inputs = {
	Inputs:{
		type:Module.Types.Array,
		defaultValue:[
		 {
		 	type:"range",
		 	name:"Price Range",
		 	options:[0,100],
		 	field:"price"
		 },
		 {
		 	type:"search",
		 	name:"makrs2",
		 	options:"hp2",
		 	field:"name"
		 },
		 {
		 	type:"exact",
		 	name:"Type1",
		 	options:["hp","canon","samsung"],
		 	field:"name"
		 },
		 {
		 	type:"select",
		 	name:"Type2",
		 	options:["hp","samsung","canon"],
		 	field:"name"
		 
		 
		 }

		],
		arrType:Module.Types.Object
	}
}

FilterModule.Outputs = {
    Filters: {}
}


FilterModule.Category = 'sxoinas'


export default FilterModule;
