import React from 'react'
import PropTypes from 'prop-types'

import Switch from 'react-bootstrap-switch'

import style from './style.css'

import { logDebug } from '../../helpers'

class ConsoleOptions extends React.Component {
  constructor (props) {
    super(props)
    this.onChangeOptions = this.onChangeOptions.bind(this)
  }

  onChangeOptions (option) {
    return function (elem, value) {
      const delta = {}
      delta[option] = value
      // redux change follows -> props will be changed
      this.props.onSave({ options: Object.assign({}, this.props.options, delta) })
    }.bind(this)
  }

  render () {
    logDebug('ConsoleOptions from web-ui, props.options: ', this.props.options)
    const { open } = this.props

    let classes = style['vm-detail-settings']
    if (open) {
      classes += ` ${style['open-settings']}`
    }

    // see index-nomodules.css for custom Switch styling
    return (
      <div className={classes}>
        <dl>
          <dt className={style['console-option-description']}>Connect automatically</dt>
          <dd>
            <Switch
              animate
              bsSize='mini'
              value={!!this.props.options.autoConnect}
              onChange={this.onChangeOptions('autoConnect')}
              />
          </dd>

          <dt className={style['console-option-description']}>Fullscreen</dt>
          <dd>
            <Switch
              animate
              bsSize='mini'
              value={!!this.props.options.fullscreen}
              onChange={this.onChangeOptions('fullscreen')}
            />
          </dd>

          <dt className={style['console-option-description']}>Map ctrl+alt+del shortcut to ctrl+alt+end</dt>
          <dd>
            <Switch
              animate
              bsSize='mini'
              value={!!this.props.options.ctrlAltDelToEnd}
              onChange={this.onChangeOptions('ctrlAltDelToEnd')}
            />
          </dd>

        </dl>
      </div>
    )
  }
}

ConsoleOptions.propTypes = {
  options: PropTypes.object.isRequired,
  onSave: PropTypes.func.isRequired,
  open: PropTypes.bool,
}

export default ConsoleOptions

@@ -131,16 +131,59 @@
 yle.css'
+%0Aimport FieldHelp from '../FieldHelp/index'
 %0A%0Aimport
@@ -1702,24 +1702,70 @@
 '%5D%7D%3E
+%0A            %3CFieldHelp content='
 Map 
-ctrl+alt+del
+Ctrl + Alt + Del keyboard
  sho
@@ -1777,20 +1777,63 @@
  to 
-ctrl+alt+end
+Ctrl + Alt + End' text='Use Ctrl+Alt+Del' /%3E%0A          
 %3C/dt

Rephrase console option for Use ctrl+alt+del