/** @jsx dom */
import arrayUniq from 'array-uniq';
import clickOutside from 'click-outside';
import dom from 'magic-virtual-element';
import Option from './option';

const propTypes = {
	class: {
		type: 'string'
	},
	id: {
		type: 'string'
	},
	multiple: {
		type: 'boolean'
	},
	name: {
		type: 'string'
	},
	onChange: {
		type: 'function'
	},
	options: {
		type: 'array'
	},
	placeholder: {
		type: 'string'
	}
};

const initialState = () => {
	return {
		active: []
	};
};

const afterMount = ({props, state}, el, setState) => {
	const {multiple, options} = props;
	const {active} = state;

	options.forEach(x => x.active && active.push(x));
	setState({active: multiple || !active.length ? active : [active[active.length - 1]]});

	clickOutside(el, () => setState({open: false}));
};

const onRemove = (val, props, state, setState) => {
	const {name, onChange} = props;
	const {active} = state;
	const arr = active.map(x => x.value);

	active.splice(arr.indexOf(val), 1);

	setState({active: arrayUniq(active)});

	if (onChange) {
		onChange({[name]: arrayUniq(active.map(x => x.value))});
	}

	return;
};

const getText = (props, state, setState) => {
	const {multiple, placeholder} = props;
	const {active} = state;

	if (active.length && multiple) {
		return active.map(x => {
			return (
				<div class='Select-multiple'>
					<div class='Select-remove' onClick={() => onRemove(x.value, props, state, setState)}>
						&#10799;
					</div>
					{x.label}
				</div>
			);
		});
	}

	if (active.length && !multiple) {
		return <div class='Select-text'>{active[0].label}</div>;
	}

	return <div class='Select-placeholder'>{placeholder}</div>;
};

const onClick = (option, props, state, setState) => {
	const {multiple, name, onChange} = props;
	const {active, open} = state;
	const arr = active.map(x => x.value);
	let ret = [option];

	if (arr.includes(option.value)) {
		active.splice(arr.indexOf(option.value), 1);

		setState({active: arrayUniq(active)});

		if (onChange) {
			onChange({[name]: arrayUniq(active.map(x => x.value))});
		}

		return;
	}

	if (multiple) {
		ret = active.filter(x => x.value).concat(ret);
	}

	setState({active: arrayUniq(ret), open: multiple ? open : false});

	if (onChange) {
		onChange({[name]: arrayUniq(ret.map(x => x.value))});
	}
};

const getOptions = (props, state, setState) => {
	const {options} = props;
	const {active} = state;
	const arr = active.filter(x => x.value).map(x => x.value);

	return options.map(x => {
		return <Option active={arr.includes(x.value)} data={x} onClick={() => onClick(x, props, state, setState)}/>;
	});
};

const render = ({props, state}, setState) => {
	const {id} = props;
	const {open} = state;

	return (
		<div class={['Select', props.class]} id={id}>
			<div class='Select-input' onClick={() => setState({open: true})}>
				{getText(props, state, setState)}
			</div>
			<div class={['Select-options', {'Select-options--open': open}]}>
				{getOptions(props, state, setState)}
			</div>
		</div>
	);
};

export default {afterMount, initialState, propTypes, render};

@@ -988,35 +988,16 @@
 (%7Bactive
-: arrayUniq(active)
 %7D);%0A%0A%09if
@@ -1922,27 +1922,8 @@
 tive
-: arrayUniq(active)
 %7D);%0A

Remove redunant `arrayUniq` calls