import React from 'react';
import map from 'lodash/map';
import { addWatchlist } from 'actions/watchlists';
import remove from 'lodash/remove';
import classnames from 'classnames';
import SymbolAutocompleteMulti, {ErrorTypes} from '../../search/SymbolAutocompleteMulti';

class WatchlistCreate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      symbols: [],
      errors: [],
      name: ''
    };
  }

  onAddSymbol(sym, index) {
    const sList = this.state.symbols.slice();
    sList.splice(index, 0, sym);
    this.setState({symbols: sList});
  }
  onAddMultiSymbol(syms, index) {
    const sList = this.state.symbols.concat(syms);
    this.setState({symbols: sList});
  }
  onRemoveSymbol(sym, index) {
    const sList = this.state.symbols.slice();
    remove(sList, sym);
    this.setState({symbols: sList});
  }
  onKeyDown(e) {
    if (e.key === 'Enter' && this.state.name.trim().length) {
      this.doCreate();
    }
  }
  onKeyPress(e) {
    if (['Enter', ','].indexOf(e.key) !== -1 && this.state.name.trim().length) {
      this.doCreate();
    }
  }

  onChange(e) {
    this.setState({name: e.target.value});
  }

  onError(errorType, err) {
    switch (errorType) {
    case ErrorTypes.INVALID_SYMBOLS:
      this.setState({errors: err});
      break;
    case ErrorTypes.UNABLE_TO_CONNECT:
      this.setState({errors: null});
      break;
    case ErrorTypes.TOO_MANY_SYMBOLS:
      this.setState({errors: err});
      break;
    default:
      break;
    }
  }

  doCreate() {
    let watchlistName = this.state.name;
    if (this.state.name === '') {
      watchlistName = 'Untitled Watchlist';
    }

    const fixLi = this.state.symbols.map((sym) => sym.value);
    addWatchlist(watchlistName, fixLi, this.props.widgetId);
    this.props.toggle();
    this.setState({name: '', symbols: [], errors: []});

    bzTrack.track('Watchlist: Create', {
      name: watchlistName
    });
  }

  backgroundClick(e) {
    if (e.target === this.refs.background) {
      this.closeModal();
    }
  }

  closeModal() {
    this.props.toggle();
    this.setState({name: ''});
  }

  renderErrors() {
    let errStr = '';
    if (Array.isArray(this.state.errors)) {
      errStr = 'The following symbols were invalid:' + this.state.errors.join(', ');
    } else if (typeof this.state.errors === 'string') {
      errStr = this.state.errors;
    } else {
      errStr = 'Could not connect to the server to verify the symbols you added were valid.';
    }
    return (
      <div>{errStr}</div>
    );
  }

  render() {
    const createWlClasses = classnames('WidgetModal', {'is-hidden': !this.props.show});

    return (
      <div ref="background"
        className={createWlClasses}
        onClick={(e) => this.backgroundClick(e)}>
        <div className="WidgetModal-box">
          <h3 className="WidgetModal-title">Create New Watchlist</h3>
          <label className="WidgetModal-label">New Watchlist Name</label>
          <input ref="input"
            type="text"
            className="WidgetModal-input WidgetModal-input--text"
            value={this.state.name}
            onChange={(e) => this.onChange(e)}
            onKeyDown={(e) => this.onKeyDown(e)}
            autoFocus
          />
          <label className="WidgetModal-label">Add Symbols</label>
          <div className="WidgetModal-input Search-container">
            <SymbolAutocompleteMulti
              dynamicSizing
              multiPlaceholder={this.state.symbols.length === 0 ? 'Search, paste, or drag a list of symbols' : 'Search...'}
              symbols={this.state.symbols}
              onAddSymbol={(data, index) => this.onAddSymbol(data, index)}
              onAddMultiSymbol={(data, index) => this.onAddMultiSymbol(data, index)}
              onRemoveSymbol={(data, index) => this.onRemoveSymbol(data, index)}
              onKeyPress={(e) => this.onKeyPress(e)}
              onError={(errType, errors) => this.onError(errType, errors)}
            />
          </div>
          {this.state.errors && this.state.errors.length !== 0 && this.renderErrors()}
          <div className="WidgetModal-proceed">
            <button className="Button Button--text" onClick={() => this.closeModal()}>Cancel</button>
            <button className="Button Button--blue" onClick={() => this.doCreate()}>Create Watchlist</button>
          </div>
        </div>
      </div>
    );
  }
}

WatchlistCreate.propTypes = {
  widgetId: React.PropTypes.number,
  toggle: React.PropTypes.func,
  show: React.PropTypes.bool
};

export default WatchlistCreate;