import { createElement } from 'react';
import Proptypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { deburrUpper } from 'app/utils';

import AutocompleteSearchComponent from './autocomplete-search-component';
import actions from './autocomplete-search-actions';
import { getFilteredCountriesWithPath } from './autocomplete-search-selectors';

export { default as component } from './autocomplete-search-component';
export { initialState } from './autocomplete-search-reducers';
export { default as reducers } from './autocomplete-search-reducers';
export { default as styles } from './autocomplete-search-styles';
export { default as actions } from './autocomplete-search-actions';

const mapStateToProps = (state) => {
  const { query } = state.autocompleteSearch;
  return {
    query: deburrUpper(query),
    searchList: getFilteredCountriesWithPath(state.autocompleteSearch)
  };
};

const AutocompleteSearchContainer = (props) => {
  const onOptionClick = (selected) => {
    const { history } = props;
    if (selected) {
      history.push(`ndcs/${selected.value}`);
    }
  };

  return createElement(AutocompleteSearchComponent, {
    ...props,
    onOptionClick
  });
};

AutocompleteSearchContainer.propTypes = {
  query: Proptypes.string,
  history: Proptypes.object
};

export default withRouter(
  connect(mapStateToProps, actions)(AutocompleteSearchContainer)
);

@@ -1,16 +1,31 @@
 import %7B
+ PureComponent,
  createE
@@ -168,49 +168,8 @@
 er';
-%0Aimport %7B deburrUpper %7D from 'app/utils';
 %0A%0Aim
@@ -766,24 +766,8 @@
 t %7B 
-query %7D = state.
 auto
@@ -780,16 +780,26 @@
 teSearch
+ %7D = state
 ;%0A  retu
@@ -818,25 +818,40 @@
 ry: 
-deburrUpper(query
+getQueryUpper(autocompleteSearch
 ),%0A 
@@ -898,14 +898,8 @@
 ath(
-state.
 auto
@@ -924,20 +924,20 @@
 %7D;%0A%7D;%0A%0Ac
-onst
+lass
  Autocom
@@ -961,30 +961,107 @@
 ner 
-= (props) =%3E %7B%0A  const
+extends PureComponent %7B%0A  componentWillUnmount() %7B%0A    this.props.setAutocompleteSearch('');%0A  %7D%0A%0A 
  onO
@@ -1113,16 +1113,21 @@
 ory %7D = 
+this.
 props;%0A 
@@ -1203,16 +1203,31 @@
 %7D%0A  %7D;%0A%0A
+  render() %7B%0A  
   return
@@ -1280,18 +1280,27 @@
     
+  
 ...
+this.
 props,%0A
+  
     
@@ -1316,17 +1316,42 @@
 lick
-%0A
+: this.onOptionClick%0A  
   %7D);%0A
+  %7D%0A
 %7D
-;
 %0A%0AAu
@@ -1392,19 +1392,21 @@
 s = %7B%0A  
-que
+histo
 ry: Prop
@@ -1415,43 +1415,66 @@
 pes.
-string,%0A  history: Proptypes.object
+object,%0A  setAutocompleteSearch: Proptypes.func.isRequired
 %0A%7D;%0A

Clear query on component unmount