import React from 'react'
import { Input, Radio } from 'antd'
import { withStore } from 'toss.store'
import './styles.scss'

const getValidator = (inputValueVaidator, message) => (rules, value, callback) => {
  if (inputValueVaidator && inputValueVaidator(value)) {
    callback()
  } else {
    callback(message)
  }
}
class RadioInput extends React.PureComponent {
  static defaultProps = {
    value: {
      radioValue: '',
      inputValue: '',
    },
    inputSize: 'medium',
    radioValues: ['0', '1'],
    labels: ['否', '是', ''],
    pattern: null,
  }

  handleRadioValueChange = event => {
    this.props.onChange &&
      this.props.onChange({
        ...this.props.value,
        radioValue: event.target.value,
      })
  }

  handleInputValueChange = event => {
    const { value: inputValue } = event.target

    if (this.props.pattern && !this.props.pattern.test(inputValue)) {
      return false
    }

    this.props.onChange &&
      this.props.onChange({
        ...this.props.value,
        inputValue,
      })
  }

  render() {
    const { value, readOnly, radioLocked, placeholder, radioValues, labels, inputSize } = this.props
    return (
      <div className="lz-component-radio-input">
        <Radio.Group
          value={value.radioValue}
          className="lz-radio-group"
          disabled={readOnly || radioLocked}
          onChange={this.handleRadioValueChange}>
          <Radio value={radioValues[0]}>{labels[0]}</Radio>
          <Radio value={radioValues[1]}>{labels[1]}</Radio>
        </Radio.Group>
        <Input
          className={inputSize}
          readOnly={readOnly}
          disabled={value.radioValue !== radioValues[1]}
          value={value.inputValue}
          maxLength={9}
          onChange={this.handleInputValueChange}
          placeholder={placeholder}
        />
        <span>{labels[2]}</span>
      </div>
    )
  }
}

const ConnectedComponent = withStore(['common'])(RadioInput)
ConnectedComponent.getValidator = getValidator

export default React.forwardRef((props, ref) => (
  <ConnectedComponent componentRef={ref} {...props} />
))