import * as tslib_1 from "tslib";
import * as React from 'react';
import { observer } from 'xmobx/mobx-react';
import { paymentMethodsContainer } from './state';
import { StyledItemWrap } from './styled';
import { SavedCardOptionItem } from './ActivePaymentItemPane';
import { SecurityCodeForm } from './SecurityCodeForm';
import { fromCardToExpiresOnText } from './deps';
let DefaultActivePane = class DefaultActivePane extends React.Component {
    render() {
        const { nameOnCard, identifier, lastFourDigits } = paymentMethodsContainer.activeSavedCard;
        const expiresOnDate = fromCardToExpiresOnText(paymentMethodsContainer.activeSavedCard);
        return (React.createElement(StyledItemWrap, { key: identifier, className: this.props.className },
            React.createElement(SavedCardOptionItem, { children: lastFourDigits, title: `card ending in ${lastFourDigits}`, name: nameOnCard, expireDate: expiresOnDate }),
            React.createElement(SecurityCodeForm, null)));
    }
};
DefaultActivePane = tslib_1.__decorate([
    observer
], DefaultActivePane);
export { DefaultActivePane };
export default DefaultActivePane;
//# sourceMappingURL=DefaultActivePane.js.map