import Input from '../../input';
import Radio from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
interface PageStates {
  value: number;
  dir: boolean;
}
class App extends React.Component<{}, PageStates> {
  onChange: (value: any, e: any) => void;
  changeDir: () => void;
  constructor(props) {
    super(props);

    this.state = {
      value: 1,
      dir: true,
    };

    this.onChange = (value, e) => {
      console.log('radio checked', value, e);
      this.setState({
        value,
      });
    };

    this.changeDir = () => {
      this.setState({
        dir: !this.state.dir,
      });
    };
  }

  render() {
    const { value } = this.state;
    return (
      <React.Fragment>
        toggle direction:{' '}
        <Switch
          size="small"
          defaultChecked
          onChange={this.changeDir}
          style={{ verticalAlign: 'middle' }}
        />
        <br />
        <br />
        <Radio.Group
          onChange={this.onChange}
          value={value}
          itemDirection={this.state.dir ? 'ver' : 'hoz'}
        >
          <Radio value={1}>Option A</Radio>
          <Radio value={2}>Option B</Radio>
          <Radio value={3}>Option C</Radio>
          <Radio value={4}>
            More...
            {value === 4 ? (
              <Input style={{ width: 100, marginLeft: 10 }} />
            ) : null}
          </Radio>
        </Radio.Group>
      </React.Fragment>
    );
  }
}

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