import React from 'react';
import { Meta, Story } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { OrganismScanTicket, IUploadFileProps } from 'native/organisms/ScanTicket';
import { theme } from 'data/dataMx';
import { View } from 'react-native';

const meta: Meta = {
  title: 'React Native/organisms/ScanTicket',
  component: OrganismScanTicket,
  argTypes: {
    colorProgress: {
      control: {
        type: 'select'
      },
      options: theme,
    },
    handleClick: {
      table: {
        disable: true
      }
    }
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateScanticket: Story<IUploadFileProps> = (props) => {
  return (
    <View style={{ flex: 1, alignContent: 'center', alignItems: 'center' }}>
      <OrganismScanTicket {...props} />
    </View>
  )
}

export const ScanTicket = TemplateScanticket.bind({});

ScanTicket.args = {
  headerText: 'Upload a receipt 👍🏻',
  captionText: 'Upload a receipt including Anheuser-Busch products to earn points. One file per upload.',
  placeholderText: 'You can select the file from your gallery or take a picture of the receipt and upload it.',
  acceptedFormatText: 'JPG, PNG (Max size: 4 MB)',
  hasError: false,
  hasSuccess: false,
  errorMessage: 'Your receipt failed to upload, try again! Remember the Max size is 6MB and our system only supports JPG and PNG.',
  successMessage: 'Your receipt was successfully uploaded, please wait for the validation of your receipt for up to 48 hours.',
  cardPadding: '30px',
  onChange: action('OnChange event'),
  onRemove: action('OnRemove event'),
  onSubmitFile: action('onSubmitFile event'),
  onError: action('OnError event'),
  captionProps: {
    size: 'large',
  },
  placeholderProps: {
    size: 'medium',
  }
};