// @flow
import React, { type Node } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './PLACEHOLDER-CARD.mkd';
import { Box } from '../../../primitives/box';
import { PlaceholderCard } from './placeholder.card';
import { TertiaryButton } from '../../actions/tertiary-button';
import { Text } from '../../typography/text';
import { Grid } from '../grid';
import { GridItem } from '../grid/grid-item';

const DemoWrapper = ({ children }: { children: Node }) => (
  <Grid>
    <GridItem sm={12} lg={6}>
      <Box colorName="background" spacing="p4">
        {children}
      </Box>
    </GridItem>
  </Grid>
);

storiesOf('Core/Structures/PlaceholderCard', module)
  .addDecorator(withInfo(configDocs(docs, PlaceholderCard)))

  .add('default', () => (
    <DemoWrapper>
      <PlaceholderCard>
        <Text fontSize="f1" colorName="greyscale-darker" bold>
          Hello!
        </Text>
        <Text fontSize="f1" colorName="greyscale-darker">
          I am a placeholder card
        </Text>

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

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