import React from 'react'

import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
import { IPaymentPlanConfig } from '../../types/payment-plan-configuration'
import { Checkbox } from '../common'

interface PaymentPlanSectionProps {
  paymentPlanConfig: IPaymentPlanConfig;
  currency: string;
  paymentPlanUseSavedCard: boolean;
  setPaymentPlanUseSavedCard: (value: boolean) => void;
}

export const PaymentPlanSection = (props: PaymentPlanSectionProps) => {
  const {
    paymentPlanConfig,
    currency,
    paymentPlanUseSavedCard,
    setPaymentPlanUseSavedCard,
  } = props

  return (
    <div className="payment_plan">
      <h2 className="payment_plan_title">Payment Plan Terms</h2>
      <div className="payment_plan_block">
        <div className="payment_plan_text">
          By clicking on the “Confirm Payment Plan” button, you are starting your payment
          plan of{' '}
          <span className="payment_plan_highlight">
            {paymentPlanConfig.total_installments}
          </span>{' '}
          payments of{' '}
          <span className="payment_plan_highlight">
            {currencyNormalizerCreator(
              createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment),
              currency
            )}
          </span>
          , which will be drawn from your account every {paymentPlanConfig.interval} days,
          with the first payment taken later today.
        </div>
        {paymentPlanConfig.has_admin_fee && (
          <div className="payment_plan_text">
            This includes a non-refundable admin fee of{' '}
            <span className="payment_plan_highlight">
              {currencyNormalizerCreator(
                createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee),
                currency
              )}
            </span>{' '}
            per payment.
          </div>
        )}
        {paymentPlanConfig.requires_deposit && (
          <div className="payment_plan_text">
            You will also be charged a single, non-refundable deposit of{' '}
            <span className="payment_plan_highlight">
              {currencyNormalizerCreator(
                createFixedFloatNormalizer(2)(paymentPlanConfig.deposit),
                currency
              )}
            </span>
            .
          </div>
        )}
        <div className="payment_plan_text payment_plan_note payment_plan_highlight">
          NOTE: If today’s payment fails, your plan will not activate. Your tickets will
          not be issued until you complete your final payment.
        </div>
        {!paymentPlanConfig.non_refundable_type && (
          <div className="payment_plan_text">
            If you do not complete your payments, your order will be canceled. Your{' '}
            <span className="payment_plan_highlight">
              first payment of{' '}
              {currencyNormalizerCreator(
                createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment),
                currency
              )}
            </span>
            {paymentPlanConfig.has_admin_fee && (
              <>
                , plus the{' '}
                <span className="payment_plan_highlight">
                  non-refundable admin-fee of{' '}
                  {currencyNormalizerCreator(
                    createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee),
                    currency
                  )}
                </span>
              </>
            )}{' '}
            will not be refunded.
          </div>
        )}
        {paymentPlanConfig.non_refundable_type === 'percent' && (
          <div className="payment_plan_text">
            If you do not complete your payments, you will receive{' '}
            <span className="payment_plan_highlight">
              {createFixedFloatNormalizer(0)(
                100 - paymentPlanConfig.non_refundable_amount
              )}
              %
            </span>{' '}
            of your money back
            {paymentPlanConfig.requires_deposit && (
              <>
                , excluding your{' '}
                {currencyNormalizerCreator(
                  createFixedFloatNormalizer(2)(paymentPlanConfig.deposit),
                  currency
                )}{' '}
                deposit
              </>
            )}
            .
          </div>
        )}
        {paymentPlanConfig.non_refundable_type === 'fixed' && (
          <div className="payment_plan_text">
            If you do not complete your payments, you will receive all your money back
            {paymentPlanConfig.non_refundable_amount && (
              <>
                except for the non-refundable amount of{' '}
                {currencyNormalizerCreator(
                  createFixedFloatNormalizer(2)(paymentPlanConfig.non_refundable_amount),
                  currency
                )}
                {paymentPlanConfig.requires_deposit && (
                  <>
                    , excluding your{' '}
                    {currencyNormalizerCreator(
                      createFixedFloatNormalizer(2)(paymentPlanConfig.deposit),
                      currency
                    )}{' '}
                    deposit
                  </>
                )}
              </>
            )}
            .
          </div>
        )}
        {!!paymentPlanConfig.saved_card?.stripe_payment_method_id && (
          <>
            {paymentPlanUseSavedCard && (
              <div className="payment_plan_text">
                {' '}
                Your payment will proceed with the card ending in ****{' '}
                <span className="payment_plan_highlight">
                  {'' + paymentPlanConfig.saved_card.last_4_digits}
                </span>
              </div>
            )}
            <div>
              <Checkbox
                label={<span className="payment_plan_toggle_label">Use this card</span>}
                required={true}
                onChange={() => {
                  setPaymentPlanUseSavedCard(!paymentPlanUseSavedCard)
                }}
                checked={paymentPlanUseSavedCard}
              />
            </div>
          </>
        )}
      </div>
    </div>
  )
}