let { ChoiceGroup, IChoiceGroupOption, getId, Fabric } = window.Fabric;

interface IChoiceGroupLabelExampleState {
  imageKey: string;
}

class ChoiceGroupLabelExample extends React.Component<{}, IChoiceGroupLabelExampleState> {
  public state: IChoiceGroupLabelExampleState = {
    imageKey: ''
  };

  // Use getId() to ensure that the label ID is unique on the page.
  // (It's also okay to use a plain string without getId() and manually ensure its uniqueness.)
  private _labelId: string = getId('labelElement');

  public render() {
    return (
      <div>
        <div id={this._labelId}>Custom label</div>
        <ChoiceGroup
          defaultSelectedKey="B"
          options={[
            {
              key: 'A',
              text: 'Option A',
              'data-automation-id': 'auto1'
            } as IChoiceGroupOption,
            {
              key: 'B',
              text: 'Option B'
            },
            {
              key: 'C',
              text: 'Option C',
              disabled: true
            },
            {
              key: 'D',
              text: 'Option D',
              disabled: true
            }
          ]}
          onChange={this._onChange}
          ariaLabelledBy={this._labelId}
          required={true}
        />
      </div>
    );
  }

  private _onChange = (ev: React.FormEvent<HTMLInputElement>, option: any): void => {
    console.dir(option);
  };
}

ReactDOM.render(<ChoiceGroupLabelExample />, document.getElementById('content'));
