import React from 'react';
import { Meta, Story } from '@storybook/react';
import { OrganismChallengeProgress, IChallengeProgressProps } from 'native/organisms/ChallengeProgress';
import { theme } from 'data/dataMx';

const meta: Meta = {
  title: 'React Native/organisms/ChallengeProgress',
  component: OrganismChallengeProgress,
  argTypes: {
    backgroundColor: {
      control: {
        type: 'select'
      },
      options: theme,
    },
    colorIcon: {
      control: {
        type: 'select'
      },
      options: theme,
    },
    textColor:{
      control: {
        type: 'select'
      },
      options: theme,
    }
  },
  parameters: {
    controls: { expanded: true },
  }
};

export default meta;

const TemplateChallengeProgress: Story<IChallengeProgressProps> = (props) => <OrganismChallengeProgress {...props} />;

export const ChallengeProgress = TemplateChallengeProgress.bind({});

ChallengeProgress.args = {
  backgroundColor: 'primary',
  backgroundImage: 'https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80',
  backgroundShadow: 'rgba(0, 0, 0, 0.5)',
  colorIcon: 'neutral100',
  sizeIcon: 44,
  sizeImageReward: '110px',
  textColor: 'neutral100',
  textHeight: '52px',
  textWidth: '58px',
  textPositionLeft: '27%',
  textPositionTop: '27%',
  textReward: 'BUD LIGHT NFL VEND ZONE ACCESS',
  title: 'COMPLETE THE CHALLENGE TO UNLOCK THE SPECIALS',
  data: [
    { challengeStatus: true },
    { challengeStatus: false },
    { challengeStatus: false },
    { challengeStatus: false },
  ],
};