// @flow
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Text, Span } from '../../typography';
import { CheckBox } from './check-box.component';
import { FieldSet } from '../field-set';
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 docs from './check-box.mdx';

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

export const Demo = () => {
  const [appleSelected, setAppleSelected] = useState(false);
  const [pearSelected, setPearSelected] = useState(false);
  const [eggplantSelected, setEggplantSelected] = useState(false);

  return (
    <FieldSet label="Favorite fruits">
      <CheckBox
        name="fruit1"
        selected={appleSelected}
        onToggle={() => setAppleSelected((last) => !last)}
      >
        Apple
      </CheckBox>
      <CheckBox
        name="fruit2"
        selected={pearSelected}
        onToggle={() => setPearSelected((last) => !last)}
      >
        Pear
      </CheckBox>
      <CheckBox
        name="fruit3"
        selected={eggplantSelected}
        onToggle={() => setEggplantSelected((last) => !last)}
        disabled
      >
        Yucky eggplant
      </CheckBox>
    </FieldSet>
  );
};

export const Selected = () => (
  <CheckBox name="demo" selected onToggle={action('onToggle')}>
    Apple
  </CheckBox>
);

export const Unselected = () => (
  <CheckBox name="demo" onToggle={action('onToggle')}>
    Apple
  </CheckBox>
);

export const Disabled = () => (
  <CheckBox name="demo" onToggle={action('onToggle')}>
    Apple
  </CheckBox>
);

export const DirectionRight = () => (
  <CheckBox
    name="demo-right"
    selected
    onToggle={action('onToggle')}
    direction="right"
  >
    Button to the right
  </CheckBox>
);

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

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={CheckBox}>check me</MarginChecker>
    <PaddingChecker Component={CheckBox}>check me</PaddingChecker>
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker Component={CheckBox} label="very label. much wow. amaze.">
    check me
  </StackeeChecker>
);

export const MixinsStacked = () => (
  <StackedChecker Component={CheckBox}>check me</StackedChecker>
);
