import React from 'react';

import { getDisplayPrice } from '@/app/(root)/account/AuraSubscriptions/CurrencySelector';
import { Currency } from '@/app/(root)/account/constants';
import { ButtonVariant } from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useBillingTaxInfo } from '@/hooks/useBillingTax';
import { CreditPack } from '@/state/sessionStore';
import { calculateTaxAmount, isTaxApplicable } from '@/utils/tax';

import { ModalButton } from '../../shared/ModalButton';

interface Props {
  selectedPack: CreditPack;
  isLoading: boolean;
  onBack(): void;
  onConfirm(): void;
}

const CreditsConfirmStep: React.FC<Props> = ({
  selectedPack,
  isLoading,
  onBack,
  onConfirm,
}) => {
  // Using the tax info to show the tax amount in the UI
  // instead of using the tax info from the backend because
  // stripe.Invoice.create_preview doesn't work with credits purchases
  // if the user is buying credits in USD but has a non-USD currency
  // as their subscription currency.
  const { data: taxInfo } = useBillingTaxInfo();
  const hasTax = isTaxApplicable(taxInfo);
  return (
    <div>
      <p className='mb-2'>
        Your saved payment method will be charged instantly upon confirmation.
      </p>
      <p className='mb-4 text-foreground-inactive'>
        Note: while purchased credits do not expire, they do require an active
        subscription to use.
      </p>

      <div className='mb-6 rounded-lg bg-white/10 p-4'>
        <div className='flex justify-between font-bold'>
          <span>{selectedPack.amount} credits</span>
          <span>
            {getDisplayPrice(selectedPack.price_usd, Currency.USD, true)}
          </span>
        </div>
        {hasTax && (
          <div>
            <div className='my-2 mt-2 h-px bg-white/20'></div>
            <div className='mb-2 flex justify-between font-bold'>
              <span>Subtotal</span>
              <span>
                {getDisplayPrice(selectedPack.price_usd, Currency.USD, true)}
              </span>
            </div>
            <div className='mb-2 flex justify-between'>
              <span>Tax</span>
              <span>
                {getDisplayPrice(
                  calculateTaxAmount(taxInfo, selectedPack.price_usd),
                  Currency.USD,
                  true
                )}
              </span>
            </div>

            <div className='my-2 h-px bg-white/20'></div>
            <div className='flex justify-between font-bold'>
              <span>Total</span>
              <span>
                {getDisplayPrice(
                  selectedPack.price_usd +
                    calculateTaxAmount(taxInfo, selectedPack.price_usd),
                  Currency.USD,
                  true
                )}
              </span>
            </div>
          </div>
        )}
      </div>

      <div className='mt-6 flex justify-center gap-3'>
        <ModalButton variant={ButtonVariant.Secondary} onClick={onBack}>
          Back
        </ModalButton>
        <ModalButton
          variant={ButtonVariant.Primary}
          icon={isLoading ? <SpinnerSVG className='fill-black' /> : undefined}
          onClick={onConfirm}
          disabled={isLoading}
        >
          {isLoading ? 'Purchasing...' : 'Purchase'}
        </ModalButton>
      </div>
    </div>
  );
};

export default CreditsConfirmStep;