import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from './Button';
const blueLogo = require('../../assets/images/paypal-logo-blue.png');
const whiteLogo = require('../../assets/images/paypal-logo-white.png');
const themes = {
    gold: {
        bg: '#ffc439',
        bgActive: '#f2bb43',
        text: '#111111',
        icon: blueLogo
    },
    blue: {
        bg: '#009cde',
        bgActive: '#37afe3',
        text: 'white',
        icon: whiteLogo
    },
    silver: {
        bg: '#eeeeee',
        bgActive: '#e2e2e2',
        text: '#111111',
        icon: blueLogo
    },
    black: {
        bg: '#2C2E2F',
        bgActive: '#565859',
        text: 'white',
        icon: whiteLogo
    }
};
const styles = StyleSheet.create({
    buttonTitle: {
        fontWeight: 'bold',
        lineHeight: 24
    },
    tagLine: {
        textAlign: 'center'
    }
});
export class PayPalCheckoutButton extends Component {
    render() {
        const { shape, style, tagLine, tagLineStyle, titleStyle, theme } = this.props;
        const selectedTheme = themes[theme];
        const buttonProps = Object.assign({}, this.props, { titleStyle: StyleSheet.flatten([
                styles.buttonTitle,
                { color: selectedTheme.text },
                titleStyle
            ]), style: StyleSheet.flatten([
                {
                    backgroundColor: selectedTheme.bg,
                    borderRadius: shape === 'rect' ? 3 : 23
                },
                style
            ]) });
        return (<View style={{ paddingVertical: 10 }}>
        <Button icon={selectedTheme.icon} underlayColor={selectedTheme.bgActive} {...buttonProps}/>
        {!!tagLine && (<Text style={[styles.tagLine, tagLineStyle]}>
            {tagLine}
          </Text>)}
      </View>);
    }
}
PayPalCheckoutButton.defaultProps = {
    shape: 'rect',
    theme: 'gold',
    title: 'Checkout',
    tagLine: 'The safer, easier way to pay'
};
//# sourceMappingURL=PayPalCheckoutButton.js.map