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

const meta: Meta = {
  title: 'React/organisms/BadgesCard',
  component: OrganismBadgeCard,
  argTypes: {},
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateBadgesCard: Story<IBadgeCardProps> = (props) => (<OrganismBadgeCard {...props} />);

export const BadgesCard = TemplateBadgesCard.bind({});

BadgesCard.args = {
  badges: [
    { badgeText: 'NFL Fan', badgeStatus: 'completed', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary', onClick: action('Badge Rookie clicked!') },
    { badgeText: 'Offensive Offensive Offensive', badgeStatus: 'inProgress', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary', onClick: action('Badge Elite clicked!') },
    { badgeText: 'NFL Quarterback Badge', badgeStatus: 'locked', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary' },
    { badgeText: 'NFL Linebacker', badgeStatus: 'locked', image: 'https://i.ibb.co/0rW958L/cheers-2.png', bgColor: 'secondary' },
    { badgeText: 'Beer Lover Badge', 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: '150px',
  imgHeight: '100%',
};