import React from 'react';
import { Meta, Story } from '@storybook/react';
import { OrganismsList, IListProps } from 'native/organisms/List';
import { action } from '@storybook/addon-actions';
import { IHistoryCardProps, MoleculeHistoryCard } from 'native/molecules/HistoryCard/index';
import { keysTheme } from 'data/dataMx';

const meta: Meta = {
  title: 'React Native/organisms/List/ListHistoryCard',
  component: OrganismsList,
  argTypes: {
    listData: {
      control: false,
      table: {
        disabled: true
      }
    }
  },
  parameters: {
    controls: { expanded: true },
  },
};
const mockDataHorizontal:IHistoryCardProps[] = []

for (let data = 0; data < 3; data++) {
  mockDataHorizontal.push(
    {
      cardWidth: '250px',
      cardHeight: '70px',
      iconName: 'earn_badges',
      iconSize: 45,
      iconCaptionText: 'Rewards',
      iconCaptionColor: 'neutral700',
    },
    {
      cardWidth: '250px',
      cardHeight: '70px',
      iconName: 'earn_scan',
      iconSize: 45,
      iconCaptionText: 'Scan',
      iconCaptionColor: 'neutral700',
      isClickable: true,
      onClick: action('Event Click'),
    }
  )

}

const mockDataVertical = []

for (let data = 0; data < 3; data++) {
  mockDataVertical.push(
    {
      cardWidth: '500px',
      cardHeight: '70px',
      iconName: 'earn_badges',
      iconSize: 45,
      iconCaptionText: 'Rewards',
      iconCaptionColor: 'neutral700' as keysTheme,
    },
    {
      cardWidth: '500px',
      cardHeight: '70px',
      iconName: 'earn_scan',
      iconSize: 45,
      iconCaptionText: 'Scan',
      iconCaptionColor: 'neutral700' as keysTheme,
      isClickable: true,
      onClick: action('Event Click'),
    }
  )

}
export default meta;

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

export const ListHistoryCard = TemplateListHistoryCard.bind({});

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