import React from "react";
import RadioGroup, { Radio, RadioGroupContext } from "../RadioGroup";
import componentCategories from "../../../docs-utils/componentCategories";
import componentGroups from "../../../docs-utils/componentGroups";
import style from "../RadioGroup.module.css";

class RadioGroup__default extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.state = {
      selectedValue: "red",
      headingChange: false
    };
  }

  onSelect(value, e) {
    this.setState({
      selectedValue: value
    });
  }

  myGroupOnChange(value, ev) {
    console.log("myGroupOnChange", value, ev);
  }

  myRadioOnChange(value, ev) {
    console.log("state new....");
    console.log("myRadioOnChange", value, ev);
  }

  myGroupOnChangeContext(value, ev) {
    console.log("myGroupOnChange", value, ev);
  }

  myRadioOnChangeContext(value, ev) {
    console.log("state new....");
    console.log("myRadioOnChange", value, ev);
  }

  render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        margin: "50px"
      }
    }, /*#__PURE__*/React.createElement(RadioGroupContext, {
      name: "colours3",
      onChange: this.myGroupOnChangeContext
    }, /*#__PURE__*/React.createElement(Radio, {
      text: "Red",
      value: "red",
      onChange: this.myRadioOnChangeContext
    }), /*#__PURE__*/React.createElement(Radio, {
      text: "Green",
      value: "green"
    }), /*#__PURE__*/React.createElement(Radio, {
      text: "Yellow",
      value: "yellow"
    }), /*#__PURE__*/React.createElement(Radio, {
      text: "Blue",
      value: "blue"
    })), /*#__PURE__*/React.createElement(RadioGroupContext, {
      name: "colours4",
      selectedValue: this.state.selectedValue,
      onChange: this.onSelect
    }, /*#__PURE__*/React.createElement(Radio, {
      text: "Red",
      value: "red"
    }), /*#__PURE__*/React.createElement(Radio, {
      text: "Green",
      value: "green"
    }), /*#__PURE__*/React.createElement(Radio, {
      text: "Yellow",
      value: "yellow"
    }), /*#__PURE__*/React.createElement(Radio, {
      text: "Blue",
      value: "blue"
    })));
  }

}

if (false) {
  RadioGroup__default.docs = {
    componentGroup: componentGroups.Components,
    folderName: componentCategories.UCL
  };
}

export default RadioGroup__default;