import * as React from 'react';
import {translate} from 'react-i18next';
import { Field } from 'redux-form';

import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';

interface IBooleanFilterInternal extends React.ClassAttributes<any> {
  input: any;
  label: string;
  t: any;
}

class BooleanDimensionFormExtraInternal extends React.Component<IBooleanFilterInternal, any> {

  private constructor(props, context) {
    super(props, context);

    this.state = {
      value: props.input.value,
    };
  }

  private handleChange = (event, value) => {
    const { input } = this.props;
    this.setState({ value });
    input.onChange(value === '3' ? 3 : value === '1' ? 1 : 2);
  }

  public componentWillReceiveProps(nextProps) {
    this.setState({value: nextProps.input.value});
  }

  public render() {
    const { label, t } = this.props;
    return (
      <div>
        <FormControl fullWidth>
          <FormLabel>{ label }</FormLabel>
          <RadioGroup
            value={ `${this.state.value}` }
            onChange={ this.handleChange }
            style={ {flexDirection: 'row', justifyContent: 'space-around'} }
          >
            <FormControlLabel
              value="1"
              control={ <Radio /> }
              label={ t('common:label.true') }
            />
            <FormControlLabel
              value="2"
              control={ <Radio /> }
              label={ t('common:label.false') }
            />
            <FormControlLabel
              value="3"
              control={ <Radio /> }
              label={ t('common:label.either') }
            />
          </RadioGroup>
        </FormControl>
      </div>
    );
  }
}

interface IBooleanDimensionFormExtra extends React.ClassAttributes<any> {
  label?: string;
  t: any;
}

class BooleanDimensionFormExtra extends React.Component<IBooleanDimensionFormExtra, any> {

  public render() {
    const { label, t } = this.props;
    return (
      <div>
        <Field
          name={ 'mode' }
          component={ BooleanDimensionFormExtraInternal }
          label={ t(label) }
          t={ t }
        />
      </div>
    );
  }
}

export default translate()(BooleanDimensionFormExtra);