import React from 'react'
import PropTypes from 'prop-types'
import Toggle from 'material-ui/Toggle'
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'

class WidgetConfig extends React.Component {
  render() {
    const { setting } = this.props
    switch (setting.type) {
      case 'boolean':
        return (
          <BooleanWidgetConfig
            setting={setting}
            onConfigUpdated={this.props.onConfigUpdated}
          />
        )
      case 'choices':
        return (
          <ChoicesWidgetConfig
            setting={setting}
            onConfigUpdated={this.props.onConfigUpdated}
          />
        )
      default:
        return null
    }
  }
}

WidgetConfig.propTypes = {
  setting: PropTypes.object.isRequired,
  onConfigUpdated: PropTypes.func.isRequired,
}

export default WidgetConfig

class BooleanWidgetConfig extends React.Component {
  onToggle(event, checked) {
    const { setting } = this.props
    this.props.onConfigUpdated(setting.field, checked)
  }

  render() {
    const { setting } = this.props

    const toggleContainerStyle = {
      width: '80%',
      marginLeft: '5%',
      marginRight: '5%',
      marginBottom: 16,
    }

    return (
      <div style={toggleContainerStyle}>
        <Toggle
          label={setting.display}
          defaultToggled={setting.value}
          onToggle={this.onToggle.bind(this)}
        />
      </div>
    )
  }
}

class ChoicesWidgetConfig extends React.Component {
  onChange(event, value) {
    const { setting } = this.props
    this.props.onConfigUpdated(setting.field, value)
  }

  render() {
    const { setting } = this.props

    const choicesContainerStyle = {
      width: '95%',
      margin: 'auto',
      display: 'flex',
    }
    const settingDisplayStyle = {
      flex: 5,
    }
    const btnGroupStyle = {
      display: 'flex',
      width: '100%',
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-end',
      alignItems: 'flex-start',
    }
    const radioBtnStyle = {
      width: 'auto',
      marginBottom: 6,
      fontSize: 14,
      minWidth: 200,
    }

    return (
      <div style={choicesContainerStyle}>
        <span style={settingDisplayStyle}>{setting.display}</span>
        <RadioButtonGroup
          onChange={this.onChange.bind(this)}
          style={btnGroupStyle}
          name={setting.field + '-choices'}
          defaultSelected={setting.value}
        >
          {setting.choices.map((choice, index) => {
            return (
              <RadioButton
                key={index}
                style={radioBtnStyle}
                value={choice}
                label={choice}
              />
            )
          })}
        </RadioButtonGroup>
      </div>
    )
  }
}
