import React from 'react';
import { Meta, Story } from '@storybook/react';
import { OrganismsList, IListProps } from 'react/organisms/List';
import { AtomButtonDefault } from 'react/atoms/Buttons/Default';
import { IProps } from 'react/atoms/Buttons/ButtonProps';
import { action } from '@storybook/addon-actions';

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

const mockData: IProps[] =[]

for (let data = 0; data < 2; data++) {
  mockData.push(
    {
      disabled: false,
      onClick: action('Event Click'),
      color: 'custom',
      text: 'Text',
      width: '144px',
      customColor: 'tertiary',
      type:'button'
    },
    {
      disabled: false,
      onClick: action('Event Click'),
      color: 'secondary',
      text: 'Text',
      width: '144px',
      type:'button'
    },
    {
      disabled: false,
      onClick: action('Event Click'),
      color: 'primary',
      text: 'Text',
      width: '144px',
      type:'button'
    }
  )

}


export default meta;

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

export const ListButton = TemplateListButton.bind({});

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