import PropTypes from 'prop-types';
import React from 'react';
import styled from 'react-emotion';

import ReactModal from 'react-modal';
import FuzzySearch from 'react-fuzzy';

const modalStyle = {
  content: {
    top: '100px',
    right: 'auto',
    bottom: 'auto',
    left: '50%',
    marginLeft: '-215px',
    border: 'none',
    padding: 0,
    overflow: 'visible',
  },
  overlay: {
    background: 'transparent',
    zIndex: '1',
  },
};

const formatStories = stories => {
  const formattedStories = [];
  let i = 0;
  stories.forEach(val => {
    i += 1;
    formattedStories.push({
      type: 'kind',
      value: val.kind,
      id: i,
    });

    val.stories.forEach(story => {
      i += 1;
      formattedStories.push({
        type: 'story',
        value: story,
        id: i,
        kind: val.kind,
      });
    });
  });

  return formattedStories;
};

const SuggestionWrapper = styled('div')(
  ({ selected, selectedResultStyle, resultsStyle }) =>
    selected ? selectedResultStyle : resultsStyle,
  { display: 'flex', justifyContent: 'space-between' }
);
const SuggestionValue = styled('p')({ margin: 0 });
const SuggestionKind = styled('p')({
  opacity: 0.5,
  margin: 0,
  paddingLeft: 10,
  textAlign: 'right',
});

const suggestionTemplate = (props, state, styles, clickHandler) =>
  state.results.map((val, i) => (
    <SuggestionWrapper
      selected={state.selectedIndex === i}
      {...styles}
      tabIndex={0}
      role="option"
      aria-selected={state.selectedIndex === i}
      key={`${val.value}_${val.id}`}
      onClick={() => clickHandler(i)}
    >
      <SuggestionValue>{val.value}</SuggestionValue>
      <SuggestionKind>{val.type === 'story' ? `in ${val.kind}` : 'Kind'}</SuggestionKind>
    </SuggestionWrapper>
  ));

export default class SearchBox extends React.Component {
  constructor(props) {
    super(props);

    this.onSelect = this.onSelect.bind(this);
    this.fireOnStory = this.fireOnStory.bind(this);
    this.fireOnKind = this.fireOnKind.bind(this);
    this.inputRef = this.inputRef.bind(this);
    this.onModalOpen = this.onModalOpen.bind(this);
  }

  onSelect(selected) {
    const { onClose } = this.props;
    if (selected.type === 'story') {
      this.fireOnStory(selected.value, selected.kind);
    } else {
      this.fireOnKind(selected.value);
    }
    onClose();
  }

  onModalOpen() {
    if (this.input != null) {
      this.input.focus();
    }
  }

  fireOnKind(kind) {
    const { onSelectStory } = this.props;
    if (onSelectStory) {
      onSelectStory(kind, null);
    }
  }

  fireOnStory(story, kind) {
    const { onSelectStory } = this.props;
    if (onSelectStory) {
      onSelectStory(kind, story);
    }
  }

  inputRef(fuzzy) {
    if (fuzzy != null) {
      this.input = fuzzy.refs.searchBox;
    }
  }

  render() {
    return (
      <ReactModal
        isOpen={this.props.showSearchBox}
        onAfterOpen={this.onModalOpen}
        onRequestClose={this.props.onClose}
        style={modalStyle}
        contentLabel="Search"
        shouldReturnFocusAfterClose={false}
      >
        <FuzzySearch
          list={formatStories(this.props.stories)}
          onSelect={this.onSelect}
          keys={['value', 'type']}
          resultsTemplate={suggestionTemplate}
          innerRef={inputRef => {
            this.inputRef = inputRef;
          }}
        />
      </ReactModal>
    );
  }
}

SearchBox.defaultProps = { stories: [] };

SearchBox.propTypes = {
  showSearchBox: PropTypes.bool.isRequired,
  stories: PropTypes.arrayOf(PropTypes.object),
  onSelectStory: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
};

@@ -1831,319 +1831,30 @@
 %7B%0A  
-constructor(props) %7B%0A    super(props);%0A%0A    this.onSelect = this.onSelect.bind(this);%0A    this.fireOnStory = this.fireOnStory.bind(this);%0A    this.fireOnKind = this.fireOnKind.bind(this);%0A    this.inputRef = this.inputRef.bind(this);%0A    this.onModalOpen = this.onModalOpen.bind(this);%0A  %7D%0A%0A  onSelect(selected)
+onSelect = selected =%3E
  %7B%0A 
@@ -1880,32 +1880,33 @@
 %7D = this.props;%0A
+%0A
     if (selected
@@ -2053,24 +2053,25 @@
 Close();%0A  %7D
+;
 %0A%0A  onModalO
@@ -2073,18 +2073,24 @@
 odalOpen
-()
+ = () =%3E
  %7B%0A    i
@@ -2102,19 +2102,38 @@
 is.input
+Ref.refs.searchBox
  !=
+=
  null) %7B
@@ -2149,16 +2149,34 @@
 is.input
+Ref.refs.searchBox
 .focus()
@@ -2178,32 +2178,33 @@
 cus();%0A    %7D%0A  %7D
+;
 %0A%0A  fireOnKind(k
@@ -2205,14 +2205,18 @@
 Kind
-(
+ = 
 kind
-)
+ =%3E
  %7B%0A 
@@ -2319,24 +2319,25 @@
 );%0A    %7D%0A  %7D
+;
 %0A%0A  fireOnSt
@@ -2339,16 +2339,19 @@
 eOnStory
+ = 
 (story, 
@@ -2355,16 +2355,19 @@
 y, kind)
+ =%3E
  %7B%0A    c
@@ -2475,105 +2475,9 @@
 %0A  %7D
-%0A%0A  inputRef(fuzzy) %7B%0A    if (fuzzy != null) %7B%0A      this.input = fuzzy.refs.searchBox;%0A    %7D%0A  %7D
+;
 %0A%0A  
@@ -2955,14 +2955,9 @@
     
-innerR
+r
 ef=%7B

FIX & REFACTOR search box