import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import { connect } from 'react-redux';

import * as actions from '../actions';

class Syntaxes extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { activeIndex: -1, inputVal: '' };
    this.onClickHandler = this.onClickHandler.bind(this);
    this.onSyntaxSearch = this.onSyntaxSearch.bind(this);
    this.filterSyntaxes = this.filterSyntaxes.bind(this);
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(actions.fetchSyntaxes);
  }

  onClickHandler(e) {
    const { index, syntax } = e.target.dataset;

    this.setState({ activeIndex: Number(index) });
    this.props.onClick(syntax);
  }

  onSyntaxSearch(e) {
    this.setState({ inputVal: e.target.value });
  }

  filterSyntaxes() {
    const filteredSyntaxes = this.props.syntaxes.filter((syntax, index) => syntax.indexOf(this.state.inputVal) !== -1);

    return filteredSyntaxes.map((syntax, index) => {
      const active = this.state.activeIndex === index ? 'active' : '';
      return (
        <li
          className={`new-snippet-lang-item ${active}`}
          data-syntax={syntax}
          data-index={index}
          key={syntax}
        >
          {syntax}
        </li>
        );
      })
  }

  render() {
    return (
      [
        <div className="new-snippet-lang-header" key="Syntax input">
          <input className="input" placeholder="Type to search..." value={this.state.inputVal} onChange={this.onSyntaxSearch} />
        </div>,
        <div className="new-snippet-lang-list-wrapper" key="Syntax list">
          <Scrollbars>
            <ul className="new-snippet-lang-list" onClick={this.onClickHandler} role="presentation">
              {this.filterSyntaxes()}
            </ul>
          </Scrollbars>
        </div>,
      ]
    );
  }
}

export default connect(state => ({
  syntaxes: state.syntaxes,
}))(Syntaxes);