const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class WikiViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {results: []};
    this.latestAjax = latest((options) => {
      if (options.url.slice(-1) == '=') return Promise.resolve(null);
      else return $.ajax(options);
    });
  }
  searchWiki = (search) => {
    const options = {
      url: this.props.url + search,
      dataType: 'jsonp'
    };
    this
    .latestAjax(options)
    .then(data => {
      if (data == null) return this.setState({results: []});
      const pages = data.query.pages;
      const results = Object.keys(pages).map(k => pages[k]).map(res => {
        res.url = 'http://en.wikipedia.org/wiki/' + encodeURIComponent(res.title);
        return res;
      });
      this.setState({results});
    })
    .catch(e => console.log(e))
  };
  render() {
    return <div style={{width: '100%'}}>
      <Search onSearch={this.searchWiki} />
      <ResultList results={this.state.results} />
    </div>
  }
}

class Search extends React.Component {
  handleInput = (e) => {
    this.props.onSearch(e.target.value);
  };
  render() {
    const style = {marginBottom: '15px', marginTop: '15px'};
    return <div style={style}>
      <input
        type="wsearch" 
        placeholder="What're we looking for?" 
        value={this.props.search}
        onInput={this.handleInput}
        style={{margin: '0 auto', display: 'block'}}
        //autoFocus
      />
    </div>
  }
}

class ResultList extends React.Component {
  render() {
    const resultNodes = this.props.results.map(result => {
      return <Result data={result} key={result.timestamp} />;
    });
    return <div>
      <ReactCSSTransitionGroup
        transitionName="fade"
        transitionEnterTimeout={250}
        transitionLeaveTimeout={150}
      >
        {resultNodes}
      </ReactCSSTransitionGroup>
    </div>
  }
}

class Result extends React.Component {
  render() {
    const {data} = this.props;
    const style = {padding: '5px'};
    return <div style={style} className='result'>
      <a
        href={data.url}
        target="_blank" 
      >
        <h1 style={{margin: '11px'}}>{data.title}</h1>
        <p style={{margin: '8px'}} dangerouslySetInnerHTML={{__html: data.extract}} />
      </a>
    </div>
  }
}

ReactDOM.render(
  <WikiViewer url='https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=max&exintro=&explaintext=&generator=search&gsrnamespace=0&gsrlimit=10&gsrsearch=' />,
  document.getElementById('content'));

console.log('SECRET FEATURE: Double-click anywhere to visit a random wiki page');
document.addEventListener('dblclick', e => {
  const options = {
    url: 'https://en.wikipedia.org/w/api.php?action=query&list=random&format=json&rnnamespace=0&rnlimit=1',
    dataType: 'jsonp'
  }
  $.ajax(options).then(data => {
      const title = data.query.random[0].title;
      window.open('http://wikipedia.org/wiki/' + title);
    });
});

// https://github.com/bjoerge/promise-latest
function latest(fn) {
  let lastAdded
  let pending
  let resolve
  let reject
  return function (...args) {
    // in the future if/when promises gets cancellable, we could abort the previous here like this
    // lastAdded.cancel()
    lastAdded = fn(...args)
    if (!pending) {
      pending = new Promise((_resolve, _reject) => {
        resolve = _resolve
        reject = _reject
      })
    }
    lastAdded.then(fulfill.bind(null, lastAdded), fail.bind(null, lastAdded))
    return pending
  }
  function fulfill(promise, value) {
    if (promise === lastAdded) {
      pending = null
      resolve(value)
    }
  }

  function fail(promise, error) {
    if (promise === lastAdded) {
      pending = null
      reject(error)
    }
  }
}