import * as React from 'react';
import { RadioGroup, RadioButton } from '../../components/radio';

class RadioGroupTest extends React.Component<any, any> {
  state = {
    value: 'vvendetta',
  };

  handleChange = (value: any) => {
    console.log('Changed!', { comic: value });
    this.setState({ value });
  };

  handleFocus = () => {
    console.log('Focused V for a Vendetta');
  };

  handleBlur = () => {
    console.log('Blurred Watchmen');
  };

  render() {
    return (
      <section>
        <h5>Radio Button</h5>
        <p style={{ marginBottom: '10px' }}>Lorem ipsum...</p>

        <RadioGroup name="comic" value={this.state.value} onChange={this.handleChange}>
          <RadioButton label="The Walking Dead" value="thewalkingdead" />
          <RadioButton label="From Hell" value="fromhell" disabled />
          <RadioButton label="V for a Vendetta" value="vvendetta" onFocus={this.handleFocus} />
          <RadioButton label="Watchmen" value="watchmen" onBlur={this.handleBlur} />
        </RadioGroup>
      </section>
    );
  }
}

export default RadioGroupTest;