import React, { useState } from "react";
import { RadioButtonGroup } from "../../../";
import { IRadioButtonProps } from "../radio-button.d";

const ControlledRadioButton = () => {
  const [selected, setSelected] = useState();

  const buttons: IRadioButtonProps[] = [1, 2, 3, 4, 5].map(i => {
    return {
      name: `Button${i}`,
      label: `Button ${i}`,
      value: `${i}`
    };
  });
  buttons.push({
    name: `Button_number`,
    label: `Button number`,
    value: 6
  });
  buttons.push({
    name: `Button_false`,
    label: `Button_false`,
    value: false
  });
  buttons.push({
    name: `Button_true`,
    label: `Button_true`,
    value: true
  });

  return (
    <>
      <div className="m-5">
        <RadioButtonGroup
          label="Radio Group Label"
          help="Some help"
          error="Required"
          className="my-class-name"
          buttons={buttons}
          defaultValue={"2"}
          selection={selected}
          onSelected={setSelected}
          inline={true}
          globalDisabled={true}
        />
        <p>Selection: {String(selected)}</p>
        <button onClick={() => setSelected(undefined)}>Reset</button>
      </div>

      <div className="m-5">
        <RadioButtonGroup
          label="Disabled radio button group with disabled reason"
          help="Some help"
          error="Required"
          className="my-class-name"
          buttons={buttons}
          defaultValue={"2"}
          selection={selected}
          onSelected={setSelected}
          inline={true}
          globalDisabled={true}
          disabledReason="This radio button group disabled for some reason"
        />
      </div>
    </>
  );
};

export default <ControlledRadioButton />;