// @flow
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Radio } from './radio.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';
import { Text, Span } from '../../typography';
import { FieldSet } from '../field-set';

import docs from './radio.mdx';

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

export const Demo = () => {
  const [selectedValue, setSelectedValue] = useState('');
  return (
    <>
      <FieldSet label="Favorite fruit">
        <Radio
          name="fruit"
          value="APPLE"
          selected={selectedValue === 'APPLE'}
          onSelected={setSelectedValue}
        >
          Apple
        </Radio>
        <Radio
          name="fruit"
          value="PEAR"
          selected={selectedValue === 'PEAR'}
          onSelected={setSelectedValue}
        >
          Pear
        </Radio>
        <Radio
          name="fruit"
          value="EGGPLANT"
          selected={selectedValue === 'EGGPLANT'}
          onSelected={setSelectedValue}
          disabled
        >
          Yucky eggplant
        </Radio>
      </FieldSet>
      {selectedValue && (
        <Text spacing="mt2">Your favorite fruit is {selectedValue}</Text>
      )}
    </>
  );
};

export const Selected = () => (
  <Radio
    name="demo-selected"
    selected
    onSelected={action('onClick')}
    value="aValue"
    disabled
  >
    An option
  </Radio>
);

export const Unselected = () => (
  <Radio
    name="demo-unselected"
    onSelected={action('onClick')}
    value="aValue"
    disabled
  >
    Button to the right
  </Radio>
);

export const Disabled = () => (
  <Radio
    name="demo-disabled"
    onSelected={action('onClick')}
    value="aValue"
    disabled
  >
    Button to the right
  </Radio>
);

export const DirectionRight = () => (
  <Radio
    name="demo-right"
    selected
    onSelected={action('onClick')}
    direction="right"
    value="aValue"
  >
    Button to the right
  </Radio>
);

export const CustomChildren = () => (
  <Radio
    name="demo-right"
    selected
    onSelected={action('onClick')}
    value="aValue"
  >
    <Text colorName="brand-secondary-fg" spacing="m0">
      I am{' '}
      <Span bold italic>
        custom
      </Span>
    </Text>
  </Radio>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker
      Component={Radio}
      name="check"
      selected
      onSelected={action('click')}
      value="aValue"
    >
      Check me
    </MarginChecker>
    <PaddingChecker
      Component={Radio}
      name="check"
      selected
      onSelected={action('click')}
      value="aValue"
    >
      Check me
    </PaddingChecker>
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={Radio}
    name="check"
    selected
    onSelected={action('click')}
    value="aValue"
  >
    Check me
  </StackeeChecker>
);

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