module.exports = require('../text/TextFilter');

import React from 'react';
import ReactDOM from 'react-dom';

import { FormField, FormInput, FormSelect, SegmentedControl } from 'elemental';

const MODE_OPTIONS = [
	{ label: 'Contains', value: 'contains' },
	{ label: 'Exactly', value: 'exactly' },
	{ label: 'Begins with', value: 'beginsWith' },
	{ label: 'Ends with', value: 'endsWith' },
];

const PRESENCE_OPTIONS = [
	{ label: 'At least one element', value: 'some' },
	{ label: 'No element', value: 'none' },
];

function getDefaultValue () {
	return {
		mode: MODE_OPTIONS[0].value,
		presence: PRESENCE_OPTIONS[0].value,
		value: '',
	};
}

var TextArrayFilter = React.createClass({
	propTypes: {
		filter: React.PropTypes.shape({
			mode: React.PropTypes.oneOf(MODE_OPTIONS.map(i => i.value)),
			presence: React.PropTypes.oneOf(PRESENCE_OPTIONS.map(i => i.value)),
			value: React.PropTypes.string,
		}),
	},
	statics: {
		getDefaultValue: getDefaultValue,
	},
	getDefaultProps () {
		return {
			filter: getDefaultValue(),
		};
	},
	updateFilter (value) {
		this.props.onChange({ ...this.props.filter, ...value });
	},
	selectMode (mode) {
		this.updateFilter({ mode });
		ReactDOM.findDOMNode(this.refs.focusTarget).focus();
	},
	selectPresence (presence) {
		this.updateFilter({ presence });
		ReactDOM.findDOMNode(this.refs.focusTarget).focus();
	},
	updateValue (e) {
		this.updateFilter({ value: e.target.value });
	},
	render () {
		const { field, filter } = this.props;
		const mode = MODE_OPTIONS.filter(i => i.value === filter.mode)[0];
		const presence = PRESENCE_OPTIONS.filter(i => i.value === filter.presence)[0];
		const beingVerb = mode.value === 'exactly' ? ' is ' : ' ';
		const placeholder = presence.label + beingVerb + mode.label.toLowerCase() + '...';

		return (
			<div>
				<FormSelect options={PRESENCE_OPTIONS} onChange={this.selectPresence} value={presence.value} />
				<FormSelect options={MODE_OPTIONS} onChange={this.selectMode} value={mode.value} />
				<FormField>
					<FormInput autofocus ref="focusTarget" value={this.props.filter.value} onChange={this.updateValue} placeholder={placeholder} />
				</FormField>
			</div>
		);
	},
});

module.exports = TextArrayFilter;

Implement textarray filter component