import { format, parseISO } from 'date-fns';
import React from 'react';

import { SUBSCRIPTION_PAGE_VERSIONS } from '@/app/(root)/account/constants';
import { ButtonVariant } from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { SubscriptionInfo } from '@/state/sessionStore';

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

interface Props {
  currentSubscription: SubscriptionInfo;
  isRenewLoading: boolean;
  onClose: () => void;
  onConfirmRenew: () => void;
}

const RenewConfirmStep: React.FC<Props> = ({
  currentSubscription,
  isRenewLoading,
  onClose,
  onConfirmRenew,
}) => (
  <div>
    <p className='mb-6'>
      Your subscription will be renewed using your saved payment information on{' '}
      {currentSubscription.cancel_on
        ? format(parseISO(currentSubscription.cancel_on), 'MMM d, y')
        : ''}
      .
    </p>

    <div className='mt-6 flex justify-center gap-3'>
      <ModalButton onClick={onClose}>Close</ModalButton>
      <ModalButton
        icon={isRenewLoading ? <SpinnerSVG className='fill-black' /> : null}
        variant={ButtonVariant.Primary}
        onClick={() => {
          logWebUserEvent({
            actionName: 'ConfirmRenewPlanButtonClicked',
            context: {
              usagePlanId: currentSubscription?.plan?.id || '',
              period: currentSubscription?.period || '',
              subPageVersion: SUBSCRIPTION_PAGE_VERSIONS.aura,
            },
          });
          onConfirmRenew();
        }}
        disabled={isRenewLoading}
      >
        {isRenewLoading ? 'Confirming...' : 'Confirm Renewal'}
      </ModalButton>
    </div>
  </div>
);

export default RenewConfirmStep;