// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Card } from './card.component';
import { CardSection } from './section/section.component';
import { Text } from '../../typography/text';
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 './card.mdx';

export default {
  component: Card,
  title: 'Components/Layout Containers/Card',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => <Card spacing="p2">Hello I am a card</Card>;

export const WithHref = () => (
  <Card spacing="p2" href="http://my.wealthsimple.com">
    Hello I am a card with a HREF
  </Card>
);

export const WithOnClick = () => (
  <Card spacing="p2" onClick={action('onClick')}>
    Hello I am a clickable card
  </Card>
);

export const CardWithSections = () => (
  <Card>
    <CardSection spacing="p3">Section one</CardSection>
    <CardSection spacing="p3">Section two</CardSection>
  </Card>
);

export const CardWithClickableSections = () => (
  <Card>
    <Text spacing={['ph3', 'pt2', 'm0']}>
      This card&apos;s sections are clickable
    </Text>
    <CardSection spacing="p3" onClick={action('click section one')}>
      Click me 1
    </CardSection>
    <CardSection spacing="p3" onClick={action('click section two')}>
      Click me 2
    </CardSection>
    <CardSection spacing="p3" onClick={action('click section two')}>
      Click me 3
    </CardSection>
  </Card>
);

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

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

export const MixinsStackee = () => (
  <StackeeChecker Component={Card} spacing="m0">
    Hello
  </StackeeChecker>
);
