import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import backgrounds from '@storybook/addon-backgrounds'
import StoryWrapper from 'storybookComponents/StoryWrapper'
import StorybookTheme from 'storybookTheme'

import Card from '.'
import CardTitle from './CardTitle'
import CardTitleImage from './CardTitleImage'
import CardContent from './CardContent'
import CardActions from './CardActions'
import ExternalLink from '../Links/ExternalLink'
import DefaultButton from '../Buttons/Default'
import checkmarkIcon from './assets/checkmark.svg'

storiesOf('Card', module)
  .addDecorator(backgrounds(StorybookTheme.storiesBackgrounds))
  .addDecorator(withKnobs)
  .addWithInfo(
    'basic usage',
    `
        This is the basic usage of the Card component.
      `,
    () => (
      <StoryWrapper>
        <Card>
          <CardTitle>A standard card</CardTitle>
          <CardContent>
            Some very informative content could be crafted into this marvelous
            card component. One could link to
            <ExternalLink href="https://blog.brickblock.io">
              our blog
            </ExternalLink>
            in here for example.
          </CardContent>
        </Card>
      </StoryWrapper>
    )
  )
  .addWithInfo(
    'with title image',
    `
        This is a card with an image on top
      `,
    () => (
      <StoryWrapper>
        <Card>
          <CardTitleImage src={checkmarkIcon} />
          <CardTitle>A card with an image</CardTitle>
          <CardContent>
            Some very informative content could be crafted into this marvelous
            card component. One could link to
            <ExternalLink href="https://blog.brickblock.io">
              our blog
            </ExternalLink>
            in here for example.
          </CardContent>
        </Card>
      </StoryWrapper>
    )
  )
  .addWithInfo(
    'with button',
    `
        This is a card with a call to action
      `,
    () => (
      <StoryWrapper>
        <Card>
          <CardTitle>A card with a button</CardTitle>
          <CardContent>
            Some very informative content could be crafted into this marvelous
            card component. One could link to
            <ExternalLink href="https://blog.brickblock.io">
              our blog
            </ExternalLink>
            in here for example.
          </CardContent>
          <CardActions>
            <ExternalLink href="https://platform.brickblock.io">
              <DefaultButton>Invest Now</DefaultButton>
            </ExternalLink>
          </CardActions>
        </Card>
      </StoryWrapper>
    )
  )
  .addWithInfo(
    'with title image and button',
    `
        This is a card with a title image and call to action
      `,
    () => (
      <StoryWrapper>
        <Card>
          <CardTitleImage src={checkmarkIcon} />
          <CardTitle>A card with image and button</CardTitle>
          <CardContent>
            Some very informative content could be crafted into this marvelous
            card component. One could link to
            <ExternalLink href="https://blog.brickblock.io">
              our blog
            </ExternalLink>
            in here for example.
          </CardContent>
          <CardActions>
            <ExternalLink href="https://platform.brickblock.io">
              <DefaultButton>Invest Now</DefaultButton>
            </ExternalLink>
          </CardActions>
        </Card>
      </StoryWrapper>
    )
  )
