import * as tslib_1 from "tslib";
import * as React from 'react';
import { observer } from 'xmobx/mobx-react';
import { ActivePaymentItemPane } from './ActivePaymentItemPane';
import { DefaultActivePane } from './DefaultActivePane';
import { ExpandedCardListWrap } from './styled';
import { paymentMethodsContainer, expandableState } from './state';
import { CardListButton } from './styled';
const renderActiveCard = (props, index) => (React.createElement(ActivePaymentItemPane, { card: props, key: props.identifier }));
export const renderExpandedView = () => {
    return (React.createElement(ExpandedCardListWrap, null, paymentMethodsContainer.nonActiveCardList.map(renderActiveCard)));
};
export const renderDefaultView = () => React.createElement(DefaultActivePane, null);
//  @@packages @todo need to fix serializing of this -.-
/**
 * @todo when payment is valid, collapse, show confirm?
 */
let ObservableToggleButton = class ObservableToggleButton extends React.Component {
    render() {
        return (React.createElement(CardListButton, Object.assign({}, this.props, { onClick: expandableState.handleToggle, isVisible: expandableState.isExpanded === false })));
    }
};
ObservableToggleButton = tslib_1.__decorate([
    observer
], ObservableToggleButton);
export { ObservableToggleButton };
export const renderToggleButton = () => React.createElement(ObservableToggleButton, null);
//# sourceMappingURL=renderProps.js.map