import React from 'react';
import mockImageSet from '../../__MOCK__/mockImageSet';
import ImageSetWidget from '../components/ImageSetWidget';

export default {
  title: 'page-ui/ImageSetWidget',
  component: ImageSetWidget,
};

const Template = (args) => <ImageSetWidget  {...args} />;

export const ImageSetWidgetDefault = Template.bind({});
ImageSetWidgetDefault.args = {
  data: mockImageSet,
  column: 3,
  marginBottom: 0,
  gap: 10,
  marginTop: 50
}

export const ImageSetWidgetLimit6 = Template.bind({});
ImageSetWidgetLimit6.args = {
  data: mockImageSet.concat(mockImageSet),
  column: mockImageSet.concat(mockImageSet).length >= 4 ? 3 : mockImageSet.concat(mockImageSet).length || 1,
  marginBottom: 0,
}


export const ImageSetCanLinkNewTab = Template.bind({});
ImageSetCanLinkNewTab.args = {
  data: mockImageSet.concat(mockImageSet),
  column: mockImageSet.concat(mockImageSet).length >= 4 ? 3 : mockImageSet.concat(mockImageSet).length || 1,
  marginBottom: 0,
  link: 'https://picsum.photos/0/0',
  targetType: 'newTab',
  alt: 'ImageSet',
}

export const ImageSetDisplayStandard = Template.bind({});
ImageSetDisplayStandard.args = {
  data: mockImageSet.concat(mockImageSet),
  column: 1,
  marginBottom: 0,
}

export const ImageSetDisplayFull = Template.bind({});
ImageSetDisplayFull.args = {
  display: 'full',
  data: mockImageSet.concat(mockImageSet),
  column: 1,
  marginBottom: 0,
  marginTop: 50
}


export const ImageSetWidgetMarginBottom = Template.bind({});
ImageSetWidgetMarginBottom.args = {
  data: mockImageSet,
  column: 3,
  marginBottom: 0,
  marginTop: 50
}

export const ImageSetWidgetMarginLeft = Template.bind({});
ImageSetWidgetMarginLeft.args = {
  data: mockImageSet,
  column: 3,
  marginLeft: 0,
  marginTop: 50
}

export const ImageSetWidgetMarginRight = Template.bind({});
ImageSetWidgetMarginRight.args = {
  data: mockImageSet,
  column: 3,
  marginRight: 0,
  marginTop: 50
}


export const ImageSetWidgetDisplayColumn = Template.bind({});
ImageSetWidgetDisplayColumn.args = {
  data: mockImageSet,
  column: 3,
  isDisplayColumn: true,
  marginTop: 50
}

export const ImageSetWidgetDisplayManyColumnAndSetIsOneColumn = Template.bind({});
ImageSetWidgetDisplayManyColumnAndSetIsOneColumn.args = {
  data: mockImageSet,
  column: 3,
  isDisplayColumn: true,
  isOneColumn: true,
  marginTop: 50
}

export const ImageSetWidgetDisplayOneColumnAndSetIsOneColumn = Template.bind({});
ImageSetWidgetDisplayOneColumnAndSetIsOneColumn.args = {
  data: mockImageSet,
  column: 1,
  isOneColumn: true,
  marginTop: 200
}