// @flow
import React from 'react';
import type { StoryDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import docs from './placeholder-card.mdx';
import { Box } from '../../../primitives/box';
import { PlaceholderCard } from './placeholder-card.component';
import { TertiaryButton } from '../../actions/tertiary-button';
import { Text } from '../../typography/text';
import { Grid } from '../grid';
import { GridItem } from '../grid/grid-item';

const Decorator: StoryDecorator = (Story) => (
  <Grid>
    <GridItem sm={12} lg={6}>
      <Box colorName="background" spacing="p4">
        <Story />
      </Box>
    </GridItem>
  </Grid>
);

export default {
  component: PlaceholderCard,
  title: 'Organisms/PlaceholderCard',
  decorators: [Decorator],
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => (
  <PlaceholderCard>
    <Text fontSize="f1" colorName="greyscale-dark" bold>
      Hello!
    </Text>
    <Text fontSize="f1" colorName="greyscale-dark">
      I am a placeholder card
    </Text>

    <Box spacing="mt3">
      <TertiaryButton onClick={action('no-op')}>Click me</TertiaryButton>
    </Box>
  </PlaceholderCard>
);

export const MinimumHeight = () => (
  <PlaceholderCard
    stacked="column"
    justify="center"
    minHeight="300px"
    minHeightMd="500px"
    minHeightLg="700px"
    spacing="p3"
  >
    <Text fontSize="f1" colorName="greyscale-dark" bold>
      Hello!
    </Text>
    <Text fontSize="f1" colorName="greyscale-dark">
      I am a placeholder card with customizable height!
    </Text>
    <Text fontSize="f1" colorName="greyscale-dark">
      Change the screen size to see.
    </Text>
    <Box spacing="mt3">
      <TertiaryButton onClick={action('no-op')}>Click me</TertiaryButton>
    </Box>
  </PlaceholderCard>
);
