import React from 'react';
import Modularity from 'modularity-front';
import Chip from '@material-ui/core/Chip';
import './chip.css';



let Module = Modularity.Module;

const chipTypes = ['manytomany','exact','onetoone'];

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

	removeChip(filter, key){
		let values = filter.values || [];
		if (key) {
			let indx = values.indexOf(key);
			indx > -1 && values.splice(indx,1);
			filter.values = values;
		} else { // range specific
			delete filter.values;
			filter.reset && filter.reset()
		}
		this.chips = this.chips.map((item) => item.name === filter.name ? filter : item);

		this.Filters.set(this.chips);
	}

	render() {
		this.chips = this.Inputs.value || [];
		const chipsView = this.chips.map((filter, index) => {
			let options = filter.options || {};
			if(chipTypes.includes(filter.type)) {
				return (filter.values || []).map((key,index) => {
					return <Chip
						key={key}
						label={options[key]}
						className="custom_chip"
						onDelete={() => this.removeChip(filter, key)}/>
				})
			} else if(filter.type === "range" && filter.values) {
				return <Chip
					key={"range" + filter.values[0] + filter.values[1]}
					label={filter.values[0] + " - " + filter.values[1]}
					className="custom_chip"
					onDelete={() => this.removeChip(filter)}/>
			} else { return  null; }
		})
		return(
			<div>
				{chipsView}
			</div>
		);
				    
	}
}

ChipModule.Inputs = {
	Inputs:{
		type:Module.Types.Array,
		arrType:Module.Types.Object
	}	
}

ChipModule.Outputs = {
	Filters:{

	}
}


ChipModule.EditPosition = "center";
ChipModule.Category = "sxoinas";
export default ChipModule;