"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const isEqual_1 = __importDefault(require("lodash/isEqual"));
const SubscriptionCard_1 = __importDefault(require("../../bosons/SubscriptionCard"));
const Dropdown_1 = __importDefault(require("../../bosons/Dropdown"));
const Loading_1 = __importDefault(require("../../bosons/Loading"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const styles_1 = __importDefault(require("./styles"));
const currency_1 = require("./currency");
const helpers_1 = require("components/helpers");
const dinero_js_1 = __importDefault(require("dinero.js"));
class License extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            selectedCurrency: 'AUD',
            isLoading: false,
            tiers: [
                {
                    type: 'FREE',
                    interval: 'Completely free for all users',
                    description: 'All features except those specific to Pro or Enterprise version',
                },
                {
                    type: 'PRO',
                    interval: 'Price per user per month',
                    description: 'Includes PBS and MBS Integration',
                },
                {
                    type: 'ENTERPRISE',
                    interval: 'Price per user per month',
                    description: 'Automated Procurement, AI Budgeting and Sales predictions, Management Reporting',
                },
            ],
            tiersPricing: [
                {
                    pricing: 0,
                    currency: 'AUD',
                },
                {
                    pricing: 9.99,
                    currency: 'AUD',
                },
                {
                    pricing: 99.0,
                    currency: 'AUD',
                },
            ],
        };
        this._updateTiers = (incomingTiers) => {
            this.setState({
                tiers: incomingTiers,
            });
        };
        this._updateTiersPricing = (newTiersPricing) => {
            this.setState({
                tiersPricing: newTiersPricing,
            });
        };
        this._handleOnChange = (name, e) => {
            this.props.onCurrencyChange(e.value);
            this._handleConvertCurrencyChange(e.value);
        };
        this._handleConvertCurrencyChange = (nextSelectedCurrency) => __awaiter(this, void 0, void 0, function* () {
            this.setState({ isLoading: true });
            const { tiers, selectedCurrency, tiersPricing } = this.state;
            const res = yield helpers_1.getCurrencyBaseAmount(selectedCurrency, nextSelectedCurrency);
            const newTiersPricing = tiersPricing.map((tier) => {
                tier.pricing = Math.round(tier.pricing * res);
                tier.currency = nextSelectedCurrency;
                return tier;
            });
            this.setState({
                selectedCurrency: nextSelectedCurrency,
                isLoading: false,
                tiersPricing: newTiersPricing,
            });
        });
        this._renderDropDown = () => {
            const { classes, showConvertCurrencyDropdown } = this.props;
            const { selectedCurrency } = this.state;
            return (React.createElement("div", { className: classes.dropdownWrapper }, showConvertCurrencyDropdown && (React.createElement(Dropdown_1.default, { label: "Currency", items: currency_1.CURRENCY, value: selectedCurrency, onChange: (e) => {
                    this._handleOnChange('selectedCurrency', e);
                }, classes: {
                    component: classes.currencyDropdown,
                } }))));
        };
        this._renderCard = () => {
            const { classes, onTierClick, selectedTierIndex } = this.props;
            const { isLoading, tiers, selectedCurrency, tiersPricing } = this.state;
            return (React.createElement("div", null, isLoading ? (React.createElement(Loading_1.default, { size: 100 })) : (React.createElement(core_1.Grid, { container: true, spacing: 16, classes: { container: classes.tiersWrapper } }, tiers.map((tier, index) => {
                const finalPrice = dinero_js_1.default({
                    amount: tiersPricing[index].pricing * 100,
                    currency: selectedCurrency,
                }).toFormat('$0,0');
                return (React.createElement(core_1.Grid, { key: index, className: classes.subscriptionCardGrid, item: true, xs: 12, sm: 6, md: 6, onClick: () => onTierClick(tier, tiersPricing[index], index) },
                    React.createElement(SubscriptionCard_1.default, { type: tier.type, price: finalPrice, shortDescription: tier.description, period: tier.interval, highlighted: selectedTierIndex === index })));
            })))));
        };
    }
    componentDidMount() {
        if (this.props.currency &&
            !isEqual_1.default(this.props.currency, this.state.selectedCurrency)) {
            this._handleConvertCurrencyChange(this.props.currency);
        }
        if (this.props.tiers && !isEqual_1.default(this.props.tiers, this.state.tiers)) {
            this._updateTiers(this.props.tiers);
        }
        if (this.props.tiersPricing &&
            !isEqual_1.default(this.props.tiersPricing, this.state.tiersPricing)) {
            this._updateTiersPricing(this.props.tiersPricing);
        }
    }
    componentDidUpdate(prevProps) {
        if (!isEqual_1.default(prevProps.currency, this.props.currency)) {
            this._handleConvertCurrencyChange(this.props.currency);
        }
        if (!isEqual_1.default(prevProps.tiers, this.props.tiers)) {
            this._updateTiers(this.props.tiers);
        }
        if (!isEqual_1.default(prevProps.tiersPricing, this.props.tiersPricing)) {
            this._updateTiersPricing(this.props.tiersPricing);
        }
    }
    render() {
        const { classes } = this.props;
        return (React.createElement("div", { className: classes.wrapper },
            this._renderDropDown(),
            this._renderCard()));
    }
}
License.defaultProps = {
    showConvertCurrencyDropdown: true,
    onCurrencyChange: () => { },
    onTierClick: () => { },
};
exports.default = withStyles_1.default(styles_1.default)(License);
//# sourceMappingURL=index.js.map