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

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

export default class ColumnPicker extends Component {
	static propTypes = {
		columns: PropTypes.array.isRequired,
		onColumnsSelect: PropTypes.func.isRequired
	};

	onColumnSelect(value) {
		const column = this.props.columns.find(c => c.value === value);

		if (column.disabled) {
			return;
		}

		column.active = !column.active;

		const columns = [...this.props.columns];

		columns.splice(columns.findIndex(c => c.value === value), 1, column);

		this.props.onColumnsSelect(columns.filter(c => c.active).map(c => c.value));
	}

	render() {
		const columns = this.props.columns.map(c => ({ ...c, content: c.disabled ? <div className="content"><div>{c.text}</div><SemanticIcon className="lock alternate" /></div> : undefined }));

		return (
			<div className={styles.ColumnPicker}>
				<SemanticDropdown
					button
					floating
					icon="table"
					labeled
					selectOnBlur={false}
					selectOnNavigation={false}
					closeOnChange={false}
					options={columns}
					pointing="top right"
					text="Show/Hide Columns"
					onChange={(e, { value }) => this.onColumnSelect(value)}
				/>
			</div>
		);
	}
}
