import React from "react";
import { Meta, Story } from "@storybook/react";
import { OrganismsList, IListProps } from "native/organisms/List";
import {
  IFilterCategoryProps,
  OrganismsFilterCategory,
} from "native/organisms/FilterCategory";

const meta: Meta = {
  title: "React Native/organisms/List/ListFilterCategory",
  component: OrganismsList,
  argTypes: {
    listData: {
      control: false,
      table: {
        disabled: true,
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};
const mockData: IFilterCategoryProps[] = [];
for (let data = 0; data < 10; data++) {
  mockData.push({
    icon: "beer",
    url: "",
    imgWidth: "66px",
    imgHeight: "46px",
    width: "80px",
    height: "56px",
    data: [],
    filterBy: [],
    initialData: [],
    isSelect: false,
    filteredData: (newFilter: any) => {},
    onPress: () => {},
    cardContainerProps: { shadowSize: "small" },
  });
}

export default meta;

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

export const ListFilterCategory = TemplateListFilterCategory.bind({});

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