import React from 'react';
import { Meta, Story } from '@storybook/react';
import { OrganismsList, IListProps } from 'react/organisms/List';
import { OrganismCardClickable } from 'react/organisms/CardClickable';
import { ICardClickable } from 'react/organisms/CardClickable/CardTypes';
import { action } from '@storybook/addon-actions';

const meta: Meta = {
  title: 'React/organisms/List/ListClickeableCard',
  component: OrganismsList,
  argTypes: {
    listData: {
      control: false,
      table: {
        disabled: true
      }
    }
  },
  parameters: {
    controls: { expanded: true },
  },
};
const mockData:ICardClickable[] = []
for (let data = 0; data < 6; data++) {
  mockData.push(
    {
      type: 'vertical',
      title: 'Michelob Ultra Special Cooler',
      description: 'Michelob Ultra',
      image: 'https://www.sram.com/globalassets/image-hierarchy/sram-product-root-images/rotors/rotors/rt-centerline-x-a1/dbrotorclx160.jpg?w=800&quality=80&format=jpg',
      category: 'Merchandise',
      points: '4500 points',
      handleClick: action('Event Click'),
    },
  )

}


export default meta;

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

export const ListClickeableCard = TemplateListClickeableCard.bind({});

ListClickeableCard.args = {
  listData: [
    {
      sectionTitle: 'Horizontal List',
      customTitleStyle: {
        size: 'medium',
        color: 'secondary',
        weight: 'bold',
        styles: {
          margin: '20px 0px'
        }
      },
      listConfig: {
        renderComponent: OrganismCardClickable,
        orientation: 'horizontal',
      },
      data: mockData
    },
    {
      sectionTitle: 'Vertical List No Columns',
      customTitleStyle: {
        size: 'xlarge',
        color: 'primary',
        weight: 'bold',
        styles: {
          margin: '20px 0px'
        }
      },
      listConfig: {
        renderComponent: OrganismCardClickable,
        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: OrganismCardClickable,
        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: OrganismCardClickable,
        numberOfColumns: 2,
        orientation: 'vertical',
        itemSeparation: '10px 5px'
      },
      data: mockData
    }
  ]
};