import React from 'react';
import { Meta, Story } from '@storybook/react';
import { OrganismsList, IListProps } from 'react/organisms/List';
import { IBannerProps, MoleculeBanner } from 'react/molecules/Banner';
import styled from 'styled-components';

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

const mockData: IBannerProps[] = []
for (let data = 0; data < 6; data++) {
  mockData.push(
    {
      image: 'https://prod-drupal.abi-rewards.de/sites/g/files/wnfebl4411/files/2022-04/join1_0%20%281%29.png',
      title: '$1 spent = 10 points',
      text: 'Buy beer at ANY participating establishment, scan the receipt and earn up 10 points for every dollar.',
      textPosition: 'left'
    },
  )

}


export default meta;

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

export const ListBanner = TemplateListBanner.bind({});

const StyledContainer = styled.div`
  width: 350px;
`

const BannerContainer = (props: IBannerProps) => {
  return (
    <StyledContainer>
      <MoleculeBanner
        {...props}
      />
    </StyledContainer>
  )
}

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