var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { TextInputMask } from 'react-native-masked-text';
import { determineCardType } from 'credit-card';
const icons = {
    AMERICANEXPRESS: require('../../assets/images/amex.png'),
    null: require('../../assets/images/creditCard.png'),
    DISCOVER: require('../../assets/images/discover.png'),
    MASTERCARD: require('../../assets/images/mastercard.png'),
    VISA: require('../../assets/images/visa.png')
};
const kMaskPatternAMEX = '9999 999999 99999';
const kMaskPatternDefault = '9999 9999 9999 9999';
const styles = StyleSheet.create({
    cardImage: {
        position: 'absolute',
        height: 17,
        width: 28
    },
    container: {
        justifyContent: 'center'
    }
});
export class CreditCardNumber extends Component {
    static getDerivedStateFromProps(nextProps, prevState) {
        const cardType = determineCardType(nextProps.value, { allowPartial: true });
        if (!prevState || cardType !== prevState.cardType) {
            const cardImage = nextProps.creditCardTypeImages.find(val => val.type === cardType);
            return {
                cardType,
                cardImage: cardImage && cardImage.image || nextProps.defaultCardImage,
                options: {
                    mask: cardType === 'AMERICANEXPRESS' ? kMaskPatternAMEX : kMaskPatternDefault
                }
            };
        }
        return null;
    }
    render() {
        const _a = this.props, { cardImageStyle, cardImageWidth, creditCardTypeImages, defaultCardImage } = _a, textInputProps = __rest(_a, ["cardImageStyle", "cardImageWidth", "creditCardTypeImages", "defaultCardImage"]);
        const { cardType } = this.state;
        return (<View style={styles.container}>
        <Image source={icons[cardType]} style={[styles.cardImage, this.props.cardImageStyle]}/>
        <TextInputMask {...textInputProps} type='custom' options={this.state.options} style={[textInputProps.style, { paddingLeft: this.props.cardImageWidth + 10 }]}/>
      </View>);
    }
}
//# sourceMappingURL=CreditCardNumber.js.map