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

const meta: Meta = {
  title: 'React Native/organisms/List/ListEmpty',
  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 TemplateListEmpty: Story<IListProps<IImageProps>> = (props) => <OrganismsList {...props} />;

export const ListEmpty = TemplateListEmpty.bind({});

ListEmpty.args = {
  listData: [],
  emptyDataProps: {
    iconName: 'empty-beer',
    titleText: 'Hey Beer lover!',
    bodyText: 'New Offers comming soon, please stay tune for more',
    blueText: 'Check the earn section',
    linkBlueText: 'https://www.google.com/',
  }
};

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

export const ListEmptyWithSection = TemplateListEmptyWithSection.bind({});

ListEmptyWithSection.args = {
  listData: [
    {
      sectionTitle: 'Horizontal List',
      customTitleStyle: {
        size: 'medium',
        color: 'secondary',
        weight: 'bold',
        styles: {
          margin: '20px 0px'
        }
      },
      listConfig: {
        renderComponent: AtomImage,
        orientation: 'horizontal',
      },
      data: []
    },
    {
      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: []
    },
    {
      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
    }
  ]
};