import React from 'react';
import PropTypes from 'prop-types';
import { c } from 'ttag';
import { Price, Info, useToggle, SmallButton } from 'react-components';
import { CYCLE } from 'proton-shared/lib/constants';
import GiftCodeForm from './GiftCodeForm';

const { MONTHLY, YEARLY, TWO_YEARS } = CYCLE;

const getBillingCycleI18N = () => ({
    [MONTHLY]: c('Info').t`monthly billing`,
    [YEARLY]: c('Info').t`annual billing`,
    [TWO_YEARS]: c('Info').t`two-year billing`
});

const PaymentDetails = ({ check, model, onChange }) => {
    const { state, toggle } = useToggle();
    const i18n = getBillingCycleI18N();

    return (
        <>
            <div className="uppercase bold small mb1">{c('Title').t`Payment details`}</div>
            <div className="flex flex-spacebetween mb1 pb1 border-bottom">
                <div className="bold">
                    {c('Label').t`Total`} ({i18n[model.cycle]})
                </div>
                <div className="bold">
                    <Price currency={model.currency}>{check.Amount}</Price>
                </div>
            </div>
            {check.Credit ? (
                <div className="flex flex-spacebetween mb1 pb1 border-bottom">
                    <div>{c('Label').t`Credits`}</div>
                    <div>
                        <Price className="color-global-success" currency={model.currency}>
                            {check.Credit}
                        </Price>
                    </div>
                </div>
            ) : null}
            {check.Proration ? (
                <div className="flex flex-spacebetween mb1 pb1 border-bottom">
                    <div>
                        <span className="mr0-5">{c('Label').t`Proration`}</span>
                        <Info url="https://protonmail.com/support/knowledge-base/credit-proration/" />
                    </div>
                    <div>
                        <Price className="color-global-success" currency={model.currency}>
                            {check.Proration}
                        </Price>
                    </div>
                </div>
            ) : null}
            {check.Gift ? (
                <div className="flex flex-spacebetween mb1 pb1 border-bottom">
                    <div>{c('Label').t`Gift`}</div>
                    <div>
                        <Price className="color-global-success" currency={model.currency}>
                            {check.Gift}
                        </Price>
                    </div>
                </div>
            ) : null}
            <div className="flex flex-spacebetween">
                <div className="bold">{c('Label').t`Amount due`}</div>
                <div className="bold">
                    <Price currency={model.currency}>{check.AmountDue}</Price>
                </div>
            </div>
            {model.gift ? null : (
                <div className="mt1">
                    {state ? (
                        <GiftCodeForm model={model} onChange={onChange} />
                    ) : (
                        <SmallButton className="pm-button--link" onClick={toggle}>{c('Action')
                            .t`Add gift code`}</SmallButton>
                    )}
                </div>
            )}
        </>
    );
};

PaymentDetails.propTypes = {
    check: PropTypes.object.isRequired,
    model: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired
};

export default PaymentDetails;

@@ -126,16 +126,27 @@
 llButton
+, useConfig
  %7D from 
@@ -179,16 +179,22 @@
  %7B CYCLE
+, APPS
  %7D from 
@@ -313,16 +313,53 @@
 = CYCLE;
+%0Aconst %7B PROTONVPN_SETTINGS %7D = APPS;
 %0A%0Aconst 
@@ -529,16 +529,16 @@
 g%60%0A%7D);%0A%0A
-
 const Pa
@@ -586,16 +586,54 @@
 %7D) =%3E %7B%0A
+    const %7B APP_NAME %7D = useConfig();%0A
     cons
@@ -1863,14 +1863,238 @@
 Info
- url=%22
+%0A                            url=%7B%0A                                APP_NAME === PROTONVPN_SETTINGS%0A                                    ? 'https://protonvpn.com/support/vpn-credit-proration/'%0A                                    : '
 http
@@ -2152,17 +2152,71 @@
 oration/
-%22
+'%0A                            %7D%0A                       
  /%3E%0A    

Update proration link from app name