import React from 'react';
import { deleteWatchlist } from 'actions/watchlists';
import classnames from 'classnames';

class WatchlistDelete extends React.Component {

  doDelete() {
    if (this.props.watchlistId !== null && this.props.watchlistName !== null) {
      deleteWatchlist(this.props.watchlistId, this.props.widgetId);
      this.props.toggle();
      return;
    }
    this.props.toggle();
  }


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

  render() {
    if (this.props.watchlistId !== null && this.props.watchlistName !== null) {
      return (
        <div className={classnames('WidgetModal', {'is-hidden': !this.props.show})} ref="background" onClick={(e) => this.backgroundClick(e)}>
          <div className="WidgetModal-box">
            <h3 className="WidgetModal-title">Delete Watchlist</h3>
            <p>Are you sure you want to delete {this.props.watchlistName}?</p>
            <div className="WidgetModal-proceed">
              <button className="Button Button--text" onClick={() => this.props.toggle()}>Cancel</button>
              <button className="Button Button--blue" onClick={() => this.doDelete()}>Delete Watchlist</button>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className={classnames('watchlist-delete', {hidden: !this.props.show})} ref="background" onClick={(e) => this.backgroundClick(e)}>
        <div className="watchlist-delete-box">
          <label className="watchlist-delete-box__label">No watchlist selected</label>
          <button className="watchlist-delete-box__submit" onClick={() => this.doDelete()}>Okay</button>
        </div>
      </div>
    );
  }

}

WatchlistDelete.propTypes = {
  toggle: React.PropTypes.func,
  show: React.PropTypes.bool,
  watchlistId: React.PropTypes.string,
  watchlistName: React.PropTypes.string,
  widgetId: React.PropTypes.number,
};

export default WatchlistDelete;