import React from 'react';
import WidgetContainer from '../../widgets/WidgetContainer';
import MainTutorial from '../../tutorials/MainTutorial';
import classnames from 'classnames';
import Immutable from 'immutable';
import { addWidget } from 'actions/workspaces';
import { skipTutorial, fireCompleteMainTutorial, saveTutorials } from 'actions/tutorials';
import map from 'lodash/map';

export default class Workspace extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.visible || nextProps.visible !== this.props.visible;
  }

  render() {
    const { activeWorkspace, tutorials } = this.props;

    const fastpickWidgets = map(['newsfeed', 'watchlist', 'security', 'calendar'], (v, k) => {
      return (<button className="Workspace-empty__quickadd" onClick={() => addWidget(v)} key={k}><i className={'bzpro-widgeticon-' + v}></i><label>{v}</label></button>);
    });
    const showTutorial = window.localStorage && !window.localStorage.tutorials;
    const tutorialPrompt = (
      <div className="tut-step tut-step--main">
        <div className="tut-step__content">
          <h4>Welcome to your first Workspace!</h4>
          <p>
            Workspaces are the backbone of the new Benzinga Pro, where you can
            add and customize different Widgets to suit your specific news and research needs.
            <br />
            <br />
            This Workspace is currently empty - select a Widget below to get it going.
          </p>
        </div>
        <div className="tut-step__controls">
          <button className="tut-step__skip" onClick={() => skipTutorial('main', tutorials)}>or skip this tutorial <i className="bzpro-icon-next"></i></button>
        </div>
      </div>
    );

    // let rowDisplay = (
    //   <div className="Workspace-empty">
    //     <section className="Workspace-empty__addwidgets">
    //       {!localStorage.tutorials ? tutorialPrompt : (
    //           <div className="Workspace-empty__title">Oh no, your workspace is empty!<br />Click a widget below to add it to your workspace.</div>)}
    //       {fastpickWidgets}
    //     </section>
    //   </div>
    // );

    let rowDisplay = (
      <div className="Workspace-empty">
        <section className="Workspace-empty__addwidgets">
          <div className="Workspace-empty__title">
            Click on the newsfeed icon below to get started with a Newsfeed Widget.
            <br />
            If you need assistance, please call us at (877) 440-9464
          </div>
          {fastpickWidgets}
        </section>
      </div>
    );

    const widgets = activeWorkspace.get('widgets');
    if (widgets.size) {
      rowDisplay = widgets.map((w, i) =>
        (<WidgetContainer key={w.get('id')} id={w.get('id')} type={w.get('type')} data={w.get('data')} />)
      );
    }
    const workspaceClass = classnames(
      'Workspace',
      'Workspace-W' + widgets.size,
      {'Workspace-column': widgets.size > 2},
      {'Workspace--active': this.props.visible}
    );

    return (
      <section className={workspaceClass} ref="workspace">
          {rowDisplay}
      </section>
    );
  }
}

Workspace.propTypes = {
  activeWorkspace: React.PropTypes.object,
  tutorials: React.PropTypes.object,
  visible: React.PropTypes.bool,
};