/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react';
import { boolean, text } from '@storybook/addon-knobs';
import FormGroup from './FormGroup';
import TextInput from '../TextInput';
import RadioButtonGroup from '../RadioButtonGroup';
import RadioButton from '../RadioButton';
import Button from '../Button';
import mdx from './FormGroup.mdx';

const props = () => ({
  disabled: boolean('Disabled (disabled)', false),
  legendId: text('Legend ID (legendId)', 'formgroup-legend-id'),
  legendText: text('Legend text (legendText)', 'FormGroup Legend'),
  hasMargin: boolean('Fieldset has bottom margin (hasMargin)', true),
});

export default {
  title: 'Components/FormGroup',

  parameters: {
    component: FormGroup,
    docs: {
      page: mdx,
    },
  },
};

export const _Default = () => (
  <FormGroup
    legendId="formgroup-legend-id"
    legendText="FormGroup Legend"
    style={{ maxWidth: '400px' }}>
    <TextInput
      id="one"
      labelText="First Name"
      style={{ marginBottom: '1rem' }}
    />
    <TextInput
      id="two"
      labelText="Last Name"
      style={{ marginBottom: '1rem' }}
    />

    <RadioButtonGroup
      legendText="Radio button heading"
      name="radio-button-group"
      defaultSelected="radio-1">
      <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
      <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
      <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
    </RadioButtonGroup>
  </FormGroup>
);

_Default.story = {
  name: 'Form Group',
};

export const Playground = () => (
  <>
    <FormGroup className="test" {...props()} style={{ maxWidth: '400px' }}>
      <TextInput
        id="one"
        labelText="First Name"
        style={{ marginBottom: '1rem' }}
      />
      <TextInput
        id="two"
        labelText="Last Name"
        style={{ marginBottom: '1rem' }}
      />

      <RadioButtonGroup
        legendText="Radio button heading"
        name="radio-button-group"
        defaultSelected="radio-1">
        <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
        <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
        <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
      </RadioButtonGroup>
    </FormGroup>
    <Button>Submit</Button>
  </>
);

@@ -1062,24 +1062,69 @@
 x' %7D%7D%3E%0A    %3C
+div style=%7B%7B marginBottom: '1rem' %7D%7D%3E%0A      %3C
 TextInput%0A  
@@ -1116,30 +1116,24 @@
   %3CTextInput
-%0A     
  id=%22one%22%0A  
@@ -1129,22 +1129,16 @@
 id=%22one%22
-%0A     
  labelTe
@@ -1144,38 +1144,55 @@
 ext=%22First Name%22
+ /%3E
 %0A    
- 
+%3C/div%3E%0A    %3Cdiv
  style=%7B%7B margin
@@ -1208,24 +1208,20 @@
 1rem' %7D%7D
+%3E
 %0A  
-  /%3E%0A
     %3CTex
@@ -1226,22 +1226,16 @@
 extInput
-%0A     
  id=%22two
@@ -1235,22 +1235,16 @@
 id=%22two%22
-%0A     
  labelTe
@@ -1261,53 +1261,21 @@
 ame%22
-%0A      style=%7B%7B marginBottom: '1rem' %7D%7D%0A    /
+ /%3E%0A    %3C/div
 %3E%0A%0A 

move margin to wrapper (#9154)