import React from 'react';
import { Meta, Story } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { OrganismsList, IListProps } from 'native/organisms/List';
import { OrganismBadgeCard, IBadgeCardProps } from 'native/organisms/BadgesCard';
import { img64 } from 'react/organisms/BadgesCard/base64';

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

const mockData: IBadgeCardProps[] = [];
for (let data = 0; data < 6; data++) {
  mockData.push(
    {
      badges: [
        { badgeText: 'Rookie', badgeStatus: 'completed', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary', onPress: action('Badge Rookie clicked!') },
        { badgeText: 'Elite', badgeStatus: 'inProgress', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary', onPress: action('Badge Elite clicked!') },
        { badgeText: 'Pro', badgeStatus: 'locked', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary' },
        { badgeText: 'Master', badgeStatus: 'locked', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary' },
        { badgeText: 'Rookie', badgeStatus: 'locked', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary' },
        { badgeText: 'Elite', badgeStatus: 'locked', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary' },
      ],
      cardHeight: '100%',
      cardWidth: '100%',
      cardShadowSize: 'regular',
      img: img64,
      imgAlt: 'Logo',
      imgWidth: '108px',
      imgHeight: '34px',
    }
  )
}

export default meta;

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

export const ListBadgesCard = TemplateListBadgesCard.bind({});

ListBadgesCard.args = {
  listData: [
    {
      sectionTitle: '',
      customTitleStyle: {
        size: 'xlarge',
        color: 'primary',
        weight: 'bold',
        styles: {
          margin: '20px 0px'
        }
      },
      listConfig: {
        renderComponent: OrganismBadgeCard,
        orientation: 'vertical',
        itemSeparation: '10px 5px'
      },
      data: mockData
    }
  ]
};