import React from "react";
import { Meta, Story } from "@storybook/react";
import { OrganismsList, IListProps } from "react/organisms/List";
import { IImageProps, AtomImage } from "react/atoms/Image/index";

const meta: Meta = {
  title: "React/organisms/List/ListImage",
  component: OrganismsList,
  argTypes: {
    listData: {
      control: false,
      table: {
        disabled: true,
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

const mockData: IImageProps[] = [];
for (let data = 0; data < 6; data++) {
  mockData.push({
    imgWidth: "250px",
    imgHeight: "250px",
    alt: "ImageAlt",
    src: "https://via.placeholder.com/150",
  });
}

export default meta;

const TemplateListImage: Story<IListProps<IImageProps>> = (props) => (
  <OrganismsList {...props} />
);

export const ListImage = TemplateListImage.bind({});

ListImage.args = {
  listData: [
    {
      sectionTitle: "Horizontal List",
      customTitleStyle: {
        size: "medium",
        color: "secondary",
        weight: "bold",
        styles: {
          margin: "20px 0px",
        },
      },
      listConfig: {
        renderComponent: AtomImage,
        orientation: "horizontal",
      },
      data: mockData,
    },
    {
      sectionTitle: "Vertical List No Columns",
      customTitleStyle: {
        size: "xlarge",
        color: "primary",
        weight: "bold",
        styles: {
          margin: "20px 0px",
        },
      },
      listConfig: {
        renderComponent: AtomImage,
        orientation: "vertical",
        itemSeparation: "10px 5px",
      },
      data: mockData,
    },
    {
      sectionTitle: "Vertical List 3 Columns",
      customTitleStyle: {
        size: "large",
        color: "tertiary",
        weight: "bold",
        styles: {
          margin: "20px 0px",
        },
      },
      listConfig: {
        renderComponent: AtomImage,
        numberOfColumns: 3,
        orientation: "vertical",
        itemSeparation: "10px 5px",
      },
      data: mockData,
    },
    {
      sectionTitle: "Vertical List 2 Columns",
      customTitleStyle: {
        size: "large",
        color: "quaternary",
        weight: "bold",
        styles: {
          margin: "20px 0px",
        },
      },
      listConfig: {
        renderComponent: AtomImage,
        numberOfColumns: 2,
        orientation: "vertical",
        itemSeparation: "10px 5px",
      },
      data: mockData,
    },
  ],
};
