import React from 'react';
import Modularity from 'modularity-front';
import { Button, Card } from 'react-materialize';
import './ArraySelector.css';
let Module = Modularity.Module;

class ArraySelector extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
			selected: props.defaultSelected || 0
		}
	}

	select(id) {
		this.setState({
			selected: id
		});
		this.Selected.set(id);
	}

	render() {
		return(
			<div className="row ArraySelector">
				{this.Array.value && this.Array.value.map((item,index) => {
					return (<div key={index} className={'col s12 m6 l3'}>
					{(this.props.displayItem && this.props.displayItem(item, index))
					 || item.toString()}
					 </div>);
				})}
				{super.render()}
			</div>
		);
				    
	}
}

ArraySelector.Inputs = {
	Array: {
		type: Module.Types.Array
	}
}

ArraySelector.Outputs = {
	Selected:{}
}



ArraySelector.Category = "Nikatlas";
export default ArraySelector;