import { WorkspaceStore, Actions } from 'mailspring-exports';
import { RetinaImg } from 'nylas-component-kit';
import React from 'react';

export default class ModeToggle extends React.Component {
  static displayName = 'ModeToggle';

  constructor(props) {
    super(props);
    this.column = WorkspaceStore.Location.MessageListSidebar;
    this.state = this._getStateFromStores();
  }

  componentDidMount() {
    this._unsubscriber = WorkspaceStore.listen(this._onStateChanged);
    this._mounted = true;
  }

  componentWillUnmount() {
    this._mounted = false;
    if (this._unsubscriber) {
      this._unsubscriber();
    }
  }

  _getStateFromStores() {
    return {
      hidden: WorkspaceStore.isLocationHidden(this.column),
    };
  }

  _onStateChanged = () => {
    // We need to keep track of this because our parent unmounts us in the same
    // event listener cycle that we receive the event in. ie:
    //
    //   for listener in listeners
    //      # 1. workspaceView remove left column
    //      # ---- Mode toggle unmounts, listeners array mutated in place
    //      # 2. ModeToggle update
    if (!this._mounted) {
      return;
    }
    this.setState(this._getStateFromStores());
  };

  _onToggleMode = () => {
    Actions.toggleWorkspaceLocationHidden(this.column);
  };

  render() {
    return (
      <button
        className={`btn btn-toolbar mode-toggle mode-${this.state.hidden}`}
        style={{ order: 500 }}
        title={this.state.hidden ? 'Show sidebar' : 'Hide sidebar'}
        onClick={this._onToggleMode}
      >
        <RetinaImg name="toolbar-person-sidebar.png" mode={RetinaImg.Mode.ContentIsMask} />
      </button>
    );
  }
}