import Radio from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const RadioGroup = Radio.Group;
const list = [
  {
    value: 'apple',
    label: 'Apple',
    disabled: false,
  },
  {
    value: 'pear',
    label: 'Pear',
  },
  {
    value: 'banana',
    label: 'banana',
  },
  {
    value: 'orange',
    label: 'Orange',
    disabled: true,
  },
];
const typeList = [
  {
    value: 'outline',
    label: 'outline',
  },
  {
    value: 'solid',
    label: 'solid',
  },
  {
    value: 'container',
    label: 'container',
  },
];
const themeList = [
  {
    value: 'white',
    label: 'white',
  },
  {
    value: 'grey',
    label: 'grey',
  },
];
interface PageStates {
  value1: string;
  value2: string;
  value3: string;
  type: string;
  theme: string;
}
class ControlApp extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);

    this.state = {
      value1: 'apple',
      value2: 'apple',
      value3: '',
      type: 'outline',
      theme: 'white',
    };

    this.onNestChange = this.onNestChange.bind(this);
    this.onSmallChange = this.onSmallChange.bind(this);
    this.onMediumChange = this.onMediumChange.bind(this);
  }

  onSmallChange(value) {
    this.setState({
      value1: value,
    });
  }

  onMediumChange(value) {
    this.setState({
      value2: value,
    });
  }

  onNestChange(value) {
    this.setState({
      value3: value,
    });
  }
  handletype = type => {
    this.setState({ type });
  };
  handletheme = theme => {
    this.setState({ theme });
  };

  render() {
    return (
      <div>
        <p style={{ fontSize: 14 }}>choose type</p>
        <Radio.Group
          defaultValue="medium"
          dataSource={typeList}
          value={this.state.type}
          onChange={this.handletype}
        />
        <p style={{ fontSize: 14 }}>choose theme</p>
        <Radio.Group
          defaultValue="medium"
          dataSource={themeList}
          value={this.state.theme}
          onChange={this.handletheme}
        />
        <div style={{ background: this.state.theme === 'grey' ? '#f3f3f3' : '#fff', padding: '10px' }}>


          <p style={{ fontSize: 14 }}>xs size</p>
          <RadioGroup
            dataSource={list}
            theme={this.state.theme as 'white' | 'grey'}
            size="xs"
            shape="button"
            value={this.state.value1}
            onChange={this.onSmallChange}
            type={this.state.type as 'outline' | 'container' | 'solid'}
          />
          <br />
          <br />
          <p style={{ fontSize: 14 }}>Small size</p>
          <RadioGroup
            dataSource={list}
            shape="button"
            size="small"
            value={this.state.value1}
            onChange={this.onSmallChange}
            theme={this.state.theme as 'white' | 'grey'}
            type={this.state.type as 'outline' | 'container' | 'solid'}
          />
          <br />
          <br />
          <p style={{ fontSize: 14 }}>Medium size (default)</p>
          <RadioGroup
            dataSource={list}
            shape="button"
            size="medium"
            value={this.state.value2}
            onChange={this.onMediumChange}
            theme={this.state.theme as 'white' | 'grey'}
            type={this.state.type as 'outline' | 'container' | 'solid'}
          />
          <br />
          <br />
          <p style={{ fontSize: 14 }}>Large size</p>
          <RadioGroup
            shape="button"
            size="large"
            value={this.state.value3}
            onChange={this.onNestChange}
            theme={this.state.theme as 'white' | 'grey'}
            type={this.state.type as 'outline' | 'container' | 'solid'}
          >
            <Radio id="banana" value="banana">
              Banana
            </Radio>
            <Radio id="watermelon" value="watermelon">
              Watermelon
            </Radio>
            <Radio id="peach" value="peach">
              Peach
            </Radio>
          </RadioGroup>
          <br />
          <br />
          <p style={{ fontSize: 14 }}>Disabled and Selected-Disabled status</p>

          <RadioGroup shape="button" theme={this.state.theme as 'white' | 'grey'} type={this.state.type as 'outline' | 'container' | 'solid'} value="banana" onChange={this.onNestChange}>
            <Radio id="peach" disabled value="peach">
              Peach
            </Radio>
            <Radio id="banana" disabled value="banana">
              Banana
            </Radio>
          </RadioGroup>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<ControlApp />, document.getElementById('radio-demo-7'));