import { addParameters } from '@storybook/react';
import React from 'react';

import { WrapContainer } from '../../src';

import { Gallery, GalleryElement } from '../../src/Gallery';
import { Card, CardMedia } from '../../src/Card';

import galleryNotes from './Gallery.md';

export default {
  title: 'Gallery',
  component: [Gallery, GalleryElement],
  propTablesExclude: [WrapContainer],
};

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

export const simple = () => {
  const images = [
    'https://images.unsplash.com/photo-1558981000-f294a6ed32b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1580391387575-0863f71b12f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1580388733016-050a45462fc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
  ];

  const elements = [...Array(6).keys()].map((x, index) => {
    const key = `key-${index}`;
    return (
      <GalleryElement
        key={key}
        px={['small', 'tiny']}
        width={[0.75, 1 / 2, 1 / 3, 1 / 4]}
      >
        <Card>
          <CardMedia
            height={200}
            width={1}
            title="Ecuador"
            alt="Ecuador"
            image={images[Math.floor(Math.random() * Math.floor(3))]}
          />
        </Card>
      </GalleryElement>
    );
  });

  return (
    <WrapContainer>
      <Gallery id="this-id-is-important">{elements}</Gallery>
    </WrapContainer>
  );
};