import React from "react"
import PropTypes from "prop-types"
import { View, Switch, Text } from "react-native"
import { reactAutoBind } from "auto-bind2"

export class BoundSwitch extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    binder: PropTypes.object.isRequired,
  }

  constructor(props) {
    super(props)
    reactAutoBind(this)
    this.state = props.binder.getBindingState(props.name)
  }

  handleValueChange(newValue) {
    const { binder, name } = this.props
    const state = binder.getBindingState(name)

    if (!state.readOnly && !state.disabled) {
      this.setState(binder.updateBindingValue(name, newValue))
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.binder !== this.props.binder) {
      this.setState(nextProps.binder.getBindingState(nextProps.name))
    }
  }

  render() {
    const { name, label } = this.props
    const { visible, disabled, value } = this.state

    return (
      <View
        style={{
          display: visible ? "flex" : "none",
          flexDirection: "row",
        }}>
        <Switch
          disabled={disabled}
          value={value}
          onValueChange={this.handleValueChange}
        />
        <Text
          style={{
            color: disabled ? "gray" : "black",
            fontSize: 16,
            paddingLeft: 8,
            alignSelf: "center",
          }}>
          {label}
        </Text>
      </View>
    )
  }
}