// @flow
import React, { useState } from 'react';
import { FieldSet } from './field-set.component';
import { Radio } from '../radio';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './field-set.mdx';

export default {
  component: FieldSet,
  title: 'Components/Inputs/FieldSet',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => {
  const [favColor, setFavColor] = useState();
  return (
    <FieldSet stacked="row" role="group" label="What's your favorite color?">
      <Radio
        name="color"
        value="BLUE"
        onSelected={setFavColor}
        selected={favColor === 'BLUE'}
      >
        Blue
      </Radio>
      <Radio
        name="color"
        value="YELLOW"
        onSelected={setFavColor}
        selected={favColor === 'YELLOW'}
      >
        Yellow
      </Radio>
    </FieldSet>
  );
};

export const HiddenLabel = () => {
  const [favColor, setFavColor] = useState();
  return (
    <FieldSet
      stacked="row"
      role="group"
      label="What's your favorite color?"
      hideLabel
    >
      <Radio
        name="color"
        value="BLUE"
        onSelected={setFavColor}
        selected={favColor === 'BLUE'}
      >
        Blue
      </Radio>
      <Radio
        name="color"
        value="YELLOW"
        onSelected={setFavColor}
        selected={favColor === 'YELLOW'}
      >
        Yellow
      </Radio>
    </FieldSet>
  );
};

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={FieldSet}>Hello</MarginChecker>
    <PaddingChecker Component={FieldSet}>Hello</PaddingChecker>
  </>
);

export const MixinsStacked = () => <StackedChecker Component={FieldSet} />;

export const MixinsStackee = () => (
  <StackeeChecker Component={FieldSet}>Hello</StackeeChecker>
);
