import { addParameters } from '@storybook/react';
import { withKnobs, text, select, number } from '@storybook/addon-knobs';
import React from 'react';

import { CardContent, Card, CardMedia } from '../../src/Card';
import { Box } from '../../src';
import cardNotes from './Card.md';

export default {
  title: 'Cards',
  component: CardContent,
  decorators: [withKnobs],
};

addParameters({ info: { text: cardNotes } });

const group = 'Props';

const title = text('Title', 'Ecuador', group);

const content = text(
  'Content',
  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam, necessitatibus. Excepturi ipsa debitis vero blanditiis soluta? Nobis sequi esse quis iste qui nihil, quisquam facere sunt quam, veritatis accusamusex.',
  group,
);

const padding = select(
  'Padding',
  ['tiny', 'small', 'base', 'large', 'xlarge', 'xxlarge'],
  'small',
  group,
);

const heightContent = number(
  'Height Content',
  180,
  {
    range: true,
    min: 150,
    max: 300,
    step: 1,
  },
  group,
);

const width = number(
  'Width',
  400,
  {
    range: true,
    min: 50,
    max: 500,
    step: 1,
  },
  group,
);

const image = text(
  'Image',
  'https://images.unsplash.com/photo-1545823217-a512b0077a6c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
  group,
);

const height = number(
  'Height',
  250,
  {
    range: true,
    min: 50,
    max: 500,
    step: 1,
  },
  group,
);

export const simple = () => {
  return (
    <Card width={width}>
      <CardContent title={title} height={heightContent} p={padding}>
        {content}
      </CardContent>
    </Card>
  );
};

export const media = () => {
  return (
    <Card width={width}>
      <CardMedia height={height} title={title} alt={title} image={image}>
        <Box color="white" textAlign="right">
          Any element
        </Box>
      </CardMedia>
    </Card>
  );
};

export const notClickable = () => {
  return (
    <Card width={width} notClickable>
      <CardMedia height={height} title={title} alt={title} image={image}>
        <Box color="white" textAlign="right">
          Any element
        </Box>
      </CardMedia>
      <CardContent title={title} height={heightContent} p={padding}>
        {content}
      </CardContent>
    </Card>
  );
};

export const allElements = () => {
  return (
    <Card width={width}>
      <CardMedia height={height} title={title} alt={title} image={image}>
        <Box color="white" textAlign="right">
          Any element
        </Box>
      </CardMedia>
      <CardContent title={title} height={heightContent} p={padding}>
        {content}
      </CardContent>
    </Card>
  );
};

export const horizontal = () => {
  return (
    <Card width={800}>
      <CardMedia
        width={[1, 2 / 5, 1 / 3]}
        height={height}
        title={title}
        alt={title}
        image={image}
      >
        <Box color="white" textAlign="right">
          Any element
        </Box>
      </CardMedia>
      <CardContent
        width={[1, 3 / 5, 2 / 3]}
        title={title}
        height={heightContent}
        p={padding}
      >
        {content}
      </CardContent>
    </Card>
  );
};