import { addParameters } from '@storybook/react';
import React from 'react';
import { ThemeProvider } from '../../src/styles';
import imageGalleryNotes from './ImageGallery.md';

import { ImageGallery, Box } from '../../src';

export default {
  title: 'ImageGallery',
  component: Image,
  propTablesExclude: [ThemeProvider],
  decorators: [(storyFn) => <Box width={[1, 1, 1 / 2]}>{storyFn()}</Box>],
};

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

const images = [
  {
    src:
      'https://images.unsplash.com/photo-1517088455889-bfa75135412c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e5548929376f93d8b1b7a21097df03bd&auto=format&fit=crop&w=749&q=80',
  },
  {
    src:
      'https://images.unsplash.com/photo-1526656892012-7b336603ed46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31c8e58b58c25dfcc18452ed29b52951&auto=format&fit=crop&w=334&q=80',
  },
  {
    src:
      'https://images.unsplash.com/photo-1521024221340-efe7d7fa239b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9ad8a99d809d3fa3a9e8dff3ecc81878&auto=format&fit=crop&w=750&q=80',
  },
  {
    src:
      'https://images.unsplash.com/photo-1523038793606-2fd28f837a85?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=919b76f4229e41416653aeb10e84e94a&auto=format&fit=crop&w=334&q=80',
  },
  {
    src:
      'https://images.unsplash.com/photo-1516832970803-325be7a92aa5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93d7ac9abad6167aecb49ebd67fd5b6d&auto=format&fit=crop&w=751&q=80',
  },
  {
    src:
      'https://images.unsplash.com/photo-1526938972776-11558ad4de30?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=973795a277e861265b0fabbf4a96afe2&auto=format&fit=crop&w=750&q=80',
  },
  {
    src:
      'https://images.unsplash.com/photo-1464550838636-1a3496df938b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f22dbf6c13ea7c21e803aa721437b691&auto=format&fit=crop&w=888&q=80',
  },
];

export const simple = () => {
  return <ImageGallery images={images} />;
};

export const twoImages = () => {
  return <ImageGallery images={images.slice(0, 2)} />;
};

export const threeImages = () => {
  return <ImageGallery images={images.slice(0, 3)} />;
};