import Radio from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const RadioGroup = Radio.Group;
const sizeList = [
  {
    value: 'xl',
    label: 'xl',
  },
  {
    value: 'large',
    label: 'large',
  },
  {
    value: 'medium',
    label: 'medium',
  },
  {
    value: 'small',
    label: 'small',
  },
];
interface PageStates {
  value: string;
  size: string;
}
class App extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);

    this.state = {
      value: 'orange',
      size: 'medium',
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(value) {
    this.setState({
      value,
    });
  }
  handlesize = size => {
    this.setState({ size });
  };

  render() {
    return (
      <div>

        <p style={{ fontSize: 14 }}>choose type</p>
        <Radio.Group
          defaultValue="medium"
          dataSource={sizeList}
          value={this.state.size}
          onChange={this.handlesize}
        />
        <br />
        <br />
        <br />
        <RadioGroup
          value={this.state.value}
          onChange={this.onChange}
          aria-labelledby="groupId"
        >
          <Radio id="apple" value="apple" size={this.state.size as 'xl' | 'large' | 'medium' | 'small'}>
            Apple
          </Radio>
          <Radio id="watermelon" value="watermelon" size={this.state.size as 'xl' | 'large' | 'medium' | 'small'}>
            Watermelon
          </Radio>
          <Radio id="orange" value="orange" size={this.state.size as 'xl' | 'large' | 'medium' | 'small'}>
            Orange
          </Radio>
        </RadioGroup>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('radio-demo-2'));