import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Dropdown as SemanticDropdown,
	Icon as SemanticIcon,
	Label as SemanticLabel
} from 'semantic-ui-react';

import * as styles from './Styles.less';

export default class FilterScope extends Component {
	static propTypes = {
		groups: PropTypes.array,
		teams: PropTypes.array.isRequired,
		people: PropTypes.array.isRequired,
		scope: PropTypes.string,
		scopesAllowed: PropTypes.array,
		value: PropTypes.string,
		onChange: PropTypes.func.isRequired,
	};

	static defaultProps = {
		groups: null,
		scope: null,
		scopesAllowed: ['team', 'person'],
		value: null
	};

	constructor(props) {
		super(props);

		const scopes = [];

		if (props.scopesAllowed.includes('team')) {
			scopes.push({
				value: 'team',
				text: 'Team',
				plural: 'Teams',
				active: props.scope === 'team'
			});
		}

		if (props.scopesAllowed.includes('person')) {
			scopes.push({
				value: 'person',
				text: 'Person',
				plural: 'People',
				active: props.scope === 'person'
			});
		}

		const scope = !props.scopesAllowed.includes(props.scope) ? props.scopesAllowed[0] : props.scope;

		this.state = {
			showFilter: props.value !== null,
			scope,
			scopes,
			teams: this.props.groups && this.props.groups.length
				? [{
					text: 'Team Groupings',
					value: 'groups',
					disabled: true,
					className: styles.Header
				}]
					.concat(this.props.groups)
					.concat([{
						text: 'Teams',
						value: 'teams',
						disabled: true,
						className: styles.Header
					}])
					.concat(this.props.teams)
				: this.props.teams,
			value: props.value
		};
	}

	onScopeChange(scope) {
		this.setState({
			scope,
			value: null
		});
	}

	onValueChange(value) {
		this.setState({
			value
		}, () => {
			this.props.onChange(this.state.scope, this.state.value);
		});
	}

	onRemove() {
		this.setState({
			scope: this.props.scopesAllowed[0],
			value: null,
			showFilter: false
		}, () => {
			this.props.onChange();
		});
	}

	render() {
		const {
			showFilter,
			scope,
			scopes,
			teams,
			value
		} = this.state;

		const scopeObj = scopes.find(s => s.value === scope);
		let options = scope === 'team' ? teams : this.props.people;
		options = options.map(o => ({ ...o, active: o.value === value }));

		return (
			<div className={styles.FilterScope}>
				<SemanticIcon name="users" />
				{
					value || showFilter ? (
						<SemanticLabel>
							<SemanticDropdown
								selection
								selectOnBlur={false}
								selectOnNavigation={false}
								options={scopes.length === 1 ? [scopeObj] : scopes}
								disabled={scopes.length === 1}
								value={scope}
								onChange={(e, { value: val }) => this.onScopeChange(val)}
							/>
							<SemanticDropdown
								selection
								search
								selectOnBlur={false}
								selectOnNavigation={false}
								options={options}
								placeholder={scopeObj.text}
								value={value}
								onChange={(e, { value: val }) => this.onValueChange(val)}
							/>
							<SemanticIcon
								name="times"
								onClick={() => this.onRemove()}
							/>
						</SemanticLabel>
					) : (
						<SemanticLabel
							color="grey"
							onClick={() => {
								this.setState(() => ({
									showFilter: true
								}));
							}}
						>
							{
								scopes.length === 1 ? (
									`All ${scopeObj.plural}`
								) : (
									'All Teams and People'
								)
							}
						</SemanticLabel>
					)
				}
			</div>
		);
	}
}
