// @flow

import React, { Component } from 'react';
import { DataSearch } from '@appbaseio/reactivesearch';
import { css } from 'react-emotion';
import { Icon } from 'antd';
import { connect } from 'react-redux';

import {
	getNestedSearchableColumns,
	getSearchableColumns,
	getSearchableColumnsWeights,
	getNesetedSearchableColumnsWeights,
} from '../../reducers/mappings';
import { getIsShowingNestedColumns } from '../../reducers/nestedColumns';
import { getMode } from '../../reducers/mode';
import { MODES } from '../../constants';

type Props = {
	isShowingNestedColumns: boolean,
	nestedSearchableColumns: string[],
	searchableColumns: string[],
	mode: string,
	searchableColumnsWeights: number[],
	nestedSearchableColumnsWeights: number[],
};

type State = {
	searchValue: string,
	hasMounted: boolean,
};

class GlobalSearch extends Component<Props, State> {
	state = {
		searchValue: '',
		hasMounted: true,
	};

	shouldComponentUpdate(nextProps) {
		const { searchValue } = this.state;
		if (nextProps.mode !== this.props.mode && searchValue.trim()) {
			this.setMountState(false);
			setTimeout(() => {
				this.setMountState(true);
			});

			return false;
		}
		return true;
	}

	setMountState = hasMounted => {
		this.setState({
			hasMounted,
		});
	};

	handleSearchValueChange = searchValue => {
		this.setState({
			searchValue,
		});
	};

	render() {
		const {
			isShowingNestedColumns,
			nestedSearchableColumns,
			searchableColumns: searchCols,
			searchableColumnsWeights,
			nestedSearchableColumnsWeights,
			mode,
		} = this.props;
		const searchableColumns = isShowingNestedColumns
			? nestedSearchableColumns
			: searchCols;
		const weights = isShowingNestedColumns
			? nestedSearchableColumnsWeights
			: searchableColumnsWeights;
		const { searchValue, hasMounted } = this.state;

		return (
			<div css={{ position: 'relative' }}>
				{hasMounted && (
					<DataSearch
						componentId="GlobalSearch"
						autosuggest={false}
						dataField={searchableColumns}
						fieldWeights={weights}
						innerClass={{
							input: `ant-input ${css`
								padding-left: 35px;
								height: 32px;
								background: #fff !important;
							`}`,
						}}
						debounce={5}
						showIcon={false}
						highlight={mode === MODES.VIEW}
						queryFormat="and"
						onChange={this.handleSearchValueChange}
						value={searchValue}
					/>
				)}
				<Icon
					type="search"
					css={{
						position: 'absolute',
						top: '50%',
						transform: 'translateY(-50%)',
						left: '10px',
					}}
				/>
			</div>
		);
	}
}

const mapStateToProps = state => ({
	searchableColumns: getSearchableColumns(state),
	searchableColumnsWeights: getSearchableColumnsWeights(state),
	nestedSearchableColumns: getNestedSearchableColumns(state),
	nestedSearchableColumnsWeights: getNesetedSearchableColumnsWeights(state),
	isShowingNestedColumns: getIsShowingNestedColumns(state),
	mode: getMode(state),
});

export default connect(mapStateToProps)(GlobalSearch);

@@ -1291,16 +1291,17 @@
 hange = 
+(
 searchVa
@@ -1303,16 +1303,31 @@
 rchValue
+, triggerQuery)
  =%3E %7B%0A%09%09
@@ -1340,21 +1340,26 @@
 etState(
+%0A%09%09%09
 %7B%0A%09%09%09
+%09
 searchVa
@@ -1361,25 +1361,55 @@
 rchValue,%0A%09%09
-%7D
+%09%7D,%0A%09%09%09() =%3E triggerQuery(),%0A%09%09
 );%0A%09%7D;%0A%0A%09ren

use triggerQuery to prevent breaking of Global Search