import React, { Component } from 'react';

class InlineSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      words: '',
      tokens: {},
    };
  }

  handleKeyup = (e) => {
    let { value } = e.target;

    let tokens  = {};
    let wordsAr = [];
    let hangingToken = null;

    value.split(' ').forEach(word => {
      if (hangingToken) {
        tokens[hangingToken] = word;
        hangingToken = undefined;
      } else if (word.split(':').length === 2 && !word.endsWith(':')) {
        let [token, value] = word.split(':');
        tokens[token] = value;
      } else if (word.endsWith(':')) {
        hangingToken = word.substring(0, word.length - 1);
      } else {
        wordsAr.push(word);
      }
      console.log(hangingToken);
    });

    let words = wordsAr.join(' ');
    this.setState({ words, tokens })
  }

  getOutput() {
    let { tokens } = this.state;
    let mappedTokens = Object.keys(tokens).map(t => `${t}: ${tokens[t]}`).join('<br />');

    return (
      <>
        <div>
          <h2>Search String</h2>
          {this.state.words}
        </div>

        <div>
          <h2>Tokens</h2>
          {mappedTokens}
        </div>
      </>
    )
  }

  render() {
    return (
      <div className="InlineSearch" style={{margin: '1em'}}>
        <input onChange={this.handleKeyup} className="search" type="text" />

        <div style={{marginTop: '1em'}}>
          <h1>
            Results
          </h1>

          {this.getOutput()}
        </div>
      </div>
    )
  }
}

export default InlineSearch;