"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_apollo_1 = require("react-apollo");
var queries_1 = require("./queries");
var __1 = require("../");
var PaymentsStyledComponents_1 = require("./PaymentsStyledComponents");
var PaymentsTextComponents_1 = require("./PaymentsTextComponents");
var PaymentsModal_1 = require("./PaymentsModal");
var PaymentsEthForm_1 = require("./PaymentsEthForm");
var MODEL_CONTENT;
(function (MODEL_CONTENT) {
    MODEL_CONTENT[MODEL_CONTENT["WHY_ETH"] = 0] = "WHY_ETH";
    MODEL_CONTENT[MODEL_CONTENT["WHAT_IS_ETH"] = 1] = "WHAT_IS_ETH";
    MODEL_CONTENT[MODEL_CONTENT["CAN_USE_CVL"] = 2] = "CAN_USE_CVL";
})(MODEL_CONTENT = exports.MODEL_CONTENT || (exports.MODEL_CONTENT = {}));
var PaymentsEth = /** @class */ (function (_super) {
    __extends(PaymentsEth, _super);
    function PaymentsEth(props) {
        var _this = _super.call(this, props) || this;
        _this.renderPaymentForm = function () {
            return (React.createElement(React.Fragment, null,
                React.createElement(PaymentsStyledComponents_1.PaymentTypeLabel, null,
                    React.createElement(PaymentsTextComponents_1.PayWithEthText, null)),
                React.createElement(PaymentsStyledComponents_1.PaymentAmountEth, null,
                    "Tip amount: ",
                    _this.state.etherToSpend + " ETH",
                    " (",
                    "$" + _this.state.usdToSpend,
                    ")"),
                React.createElement(react_apollo_1.Mutation, { mutation: queries_1.PAYMENTS_ETH_MUTATION }, function (paymentsCreateEtherPayment) {
                    return (React.createElement(PaymentsEthForm_1.PaymentsEthForm, { postId: _this.props.postId, paymentAddress: _this.props.paymentAddress, userAddress: _this.props.userAddress, savePayment: paymentsCreateEtherPayment, etherToSpend: _this.state.etherToSpend, usdToSpend: _this.state.usdToSpend, newsroomName: _this.props.newsroomName, handlePaymentSuccess: _this.props.handlePaymentSuccess }));
                }),
                React.createElement(PaymentsModal_1.PaymentsModal, { open: _this.state.isMobileWalletModalOpen, handleClose: _this.handleClose },
                    React.createElement(PaymentsTextComponents_1.ConnectMobileWalletModalText, null))));
        };
        _this.notEnoughEthError = function (error) {
            _this.setState({ notEnoughEthError: error });
        };
        _this.handlePaymentStarted = function () {
            _this.setState({ paymentStarted: true });
        };
        _this.showMobileWalletModal = function () {
            var showMobileWalletModal = false;
            if (window.innerWidth < 800 && !_this.props.isWalletConnected) {
                showMobileWalletModal = true;
            }
            return showMobileWalletModal;
        };
        _this.renderInfoModal = function () {
            switch (_this.state.modalContent) {
                case MODEL_CONTENT.WHY_ETH:
                    return React.createElement(PaymentsTextComponents_1.WhyEthInfoText, null);
                case MODEL_CONTENT.WHAT_IS_ETH:
                    return React.createElement(PaymentsTextComponents_1.WhatIsEthInfoText, null);
                case MODEL_CONTENT.CAN_USE_CVL:
                    return React.createElement(PaymentsTextComponents_1.CanUseCVLInfoText, null);
                default:
                    return React.createElement(React.Fragment, null);
            }
        };
        _this.openInfoModal = function (modelContent) {
            _this.setState({ isInfoModalOpen: true, modalContent: modelContent });
        };
        _this.handleClose = function () {
            _this.setState({ isInfoModalOpen: false, isMobileWalletModalOpen: false });
        };
        _this.state = {
            isMobileWalletModalOpen: _this.showMobileWalletModal(),
            isInfoModalOpen: false,
            etherToSpend: 0,
            usdToSpend: _this.props.usdToSpend,
            notEnoughEthError: false,
            paymentStarted: false,
        };
        return _this;
    }
    PaymentsEth.prototype.render = function () {
        var _this = this;
        if (this.state.paymentStarted) {
            return React.createElement(React.Fragment, null, this.renderPaymentForm());
        }
        return (React.createElement(React.Fragment, null,
            React.createElement(PaymentsStyledComponents_1.PaymentTypeLabel, null,
                React.createElement(PaymentsTextComponents_1.PayWithEthText, null)),
            React.createElement(PaymentsStyledComponents_1.PaymentDirectionsStyled, null,
                React.createElement(PaymentsTextComponents_1.PayWithEthDescriptionText, null)),
            !this.props.isWalletConnected && React.createElement(PaymentsTextComponents_1.ConnectWalletWarningText, null),
            React.createElement(PaymentsStyledComponents_1.PaymentEthLearnMore, null,
                React.createElement("a", { onClick: function () { return _this.openInfoModal(MODEL_CONTENT.WHAT_IS_ETH); } }, "What is ETH?"),
                React.createElement("a", { onClick: function () { return _this.openInfoModal(MODEL_CONTENT.WHY_ETH); } }, "Why ETH?"),
                React.createElement("a", { onClick: function () { return _this.openInfoModal(MODEL_CONTENT.CAN_USE_CVL); } }, "Can I use CVL?")),
            React.createElement(__1.UsdEthConverter, { fromValue: this.state.usdToSpend.toString(), onNotEnoughEthError: function (error) { return _this.notEnoughEthError(error); }, onConversion: function (usd, eth) { return _this.setConvertedAmount(usd, eth); } }),
            React.createElement(PaymentsStyledComponents_1.PaymentBtn, { onClick: this.handlePaymentStarted, disabled: this.state.notEnoughEthError }, "Next"),
            React.createElement(PaymentsModal_1.PaymentsModal, { open: this.state.isInfoModalOpen, handleClose: this.handleClose }, this.renderInfoModal())));
    };
    PaymentsEth.prototype.setConvertedAmount = function (usdToSpend, etherToSpend) {
        var eth = parseFloat(etherToSpend.toFixed(6));
        this.setState({ usdToSpend: usdToSpend, etherToSpend: eth });
    };
    return PaymentsEth;
}(React.Component));
exports.PaymentsEth = PaymentsEth;
//# sourceMappingURL=PaymentsEth.js.map