{ComponentRegistry,
 WorkspaceStore,
 Actions} = require "nylas-exports"
{RetinaImg} = require 'nylas-component-kit'
React = require "react"
_ = require "underscore"


##
## THIS FILE IS NOT IN USE! DEPRECATED IN FAVOR OF ModeToggle
##

class ModeSwitch extends React.Component
  @displayName: 'ModeSwitch'

  constructor: (@props) ->
    @state = @_getStateFromStores()

  componentDidMount: =>
    @unsubscribe = WorkspaceStore.listen @_onStateChanged

  componentWillUnmount: =>
    @unsubscribe?()

  render: =>
    return <div></div> unless @state.visible

    knobX = if @state.mode is 'list' then 25 else 41

    # Currently ModeSwitch is an opaque control that is not intended
    # to be styled, hence the fixed margins and positions. If we
    # turn this into a standard component one day, change!
    <div className="mode-switch"
         style={order:1001, marginTop:14, marginRight:20}
         onClick={@_onToggleMode}>
      <RetinaImg
        data-mode={'list'}
        name="toolbar-icon-listmode.png"
        mode={RetinaImg.Mode.ContentIsMask}
        active={@state.mode is 'list'}
        onClick={@_onSetMode}
        style={paddingRight:12} />
      <RetinaImg
        name="modeslider-bg.png"/>
      <RetinaImg
        name="modeslider-knob.png"
        className="handle"
        style={top:4, left: knobX}/>
      <RetinaImg
        data-mode={'split'}
        name="toolbar-icon-splitpanes.png"
        mode={RetinaImg.Mode.ContentIsMask}
        active={@state.mode is 'split'}
        onClick={@_onSetMode}
        style={paddingLeft:12} />
    </div>

  _onStateChanged: =>
    @setState(@_getStateFromStores())

  _getStateFromStores: =>
    rootModes = WorkspaceStore.rootSheet().supportedModes
    rootVisible = WorkspaceStore.rootSheet() is WorkspaceStore.topSheet()

    mode: WorkspaceStore.layoutMode()
    visible: rootVisible and rootModes and rootModes.length > 1

  _onToggleMode: =>
    if @state.mode is 'list'
      Actions.selectLayoutMode('split')
    else
      Actions.selectLayoutMode('list')

  _onSetMode: (event) =>
    Actions.selectLayoutMode(event.target.dataset.mode)
    event.stopPropagation()


module.exports = ModeSwitch