import React from 'react';
import { Text } from 'react-native';
import { storiesOf } from '@storybook/react';
import { CreditCardForm } from '../CreditCardForm';
import { FormLabelPosition } from '../Form';
const icons = {
    cvv: require('./assets/images/cvv.png'),
    card: require('./assets/images/credit_card.png')
};
const cardIcons = [
    { type: 'AMERICANEXPRESS', image: require('./assets/images/amex.png') },
    { type: 'DISCOVER', image: require('./assets/images/discover.png') },
    { type: 'MASTERCARD', image: require('./assets/images/mastercard.png') },
    { type: 'VISA', image: require('./assets/images/visa.png') }
];
const fieldsStyle = {
    floatingLabelView: {
        marginTop: 10,
        marginBottom: 0,
        position: 'absolute',
        top: -12
    }
};
const renderCCForm = (labelPosition) => {
    return (() => (<CreditCardForm cscIcon={icons.cvv} cscIconStyle={{ marginLeft: 5, marginTop: 35 }} fieldsStyleConfig={fieldsStyle} defaultCardImage={icons.card} supportedCards={cardIcons} supportedCardsLabel={<Text>Supported</Text>} supportedCardsStyle={{ justifyContent: 'flex-start' }} supportedIconStyle={{ height: 16, width: 26, marginLeft: 10 }} labelPosition={labelPosition}/>));
};
storiesOf('CreditCardForm', module)
    .add('basic usage', renderCCForm())
    .add('label above', renderCCForm(FormLabelPosition.Above))
    .add('label floating', renderCCForm(FormLabelPosition.Floating))
    .add('label hidden', renderCCForm(FormLabelPosition.Hidden));
//# sourceMappingURL=CreditCardForm.story.js.map