import Radio from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
interface PageStates {
  isPreview: boolean;
  checked: boolean;
}
class App extends React.Component<{}, PageStates> {
  toggleCheck: () => void;
  togglePreview: () => void;
  renderChecked: (checked: any, props: any) => JSX.Element;
  renderPreview: (previewed: any, props: any) => JSX.Element;
  constructor(props) {
    super(props);
    this.state = {
      isPreview: true,
      checked: true,
    };
    this.togglePreview = () => {
      this.setState({
        isPreview: !this.state.isPreview,
      });
    };
    this.toggleCheck = () => {
      this.setState({
        checked: !this.state.checked,
      });
    };
    this.renderChecked = (checked, props) =>
      (checked ? <span>{props.children}</span> : <span>null</span>);
    this.renderPreview = previewed => <span>{previewed.label}</span>;
  }
  render() {
    return (
      <React.Fragment>
        toggle checked:
        <Switch
          size="small"
          defaultChecked
          onChange={this.toggleCheck}
          style={{ verticalAlign: 'middle', marginRight: 30 }}
        />
        toggle isPreview:{' '}
        <Switch
          size="small"
          defaultChecked
          onChange={this.togglePreview}
          style={{ verticalAlign: 'middle' }}
        />
        <br />
        <br />
        <span style={{ fontSize: 14 }}>Single: </span>
        <Radio
          className="radio-preview-inline"
          checked={this.state.checked}
          // @ts-ignore
          isPreview={this.state.isPreview}
          renderPreview={this.renderChecked}
        >
          Radio
        </Radio>
        <br />
        <span style={{ fontSize: 14 }}>Group: </span>
        <Radio.Group
          className="radio-group-preview-inlline"
          name="radio"
          defaultValue={'react'}
          // @ts-ignore
          isPreview={this.state.isPreview}
          renderPreview={this.renderPreview}
        >
          <Radio value="react">React</Radio>
          <Radio value="vue">Vue</Radio>
          <Radio value="angular">Angular</Radio>
        </Radio.Group>
      </React.Fragment>
    );
  }
}

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

// .radio-preview-inline {
//   display: inline-block;
//   margin-left: 8px;
//   line-height: 40px;
// }

// .radio-group-preview-inlline {
//   display: inline-block;
//   margin-left: 8px;
//   line-height: 40px;
// }