'use client';

import { useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';

import { toast } from '@/components/toast/Toast';
import { useApiClient } from '@/lib/apiClient';
import { SubscriptionInfo } from '@/state/sessionStore';
import { ModalStep } from '@/utils/subscriptionModalUtils';

import { useRenewSubscription } from './shared/hooks';
import RenewConfirmStep from './steps/renew/RenewConfirmStep';
import RenewSuccessStep from './steps/renew/RenewSuccessStep';

interface RenewSubscriptionModalContentProps {
  currentSubscription: SubscriptionInfo;
  onClose: () => void;
}

const RenewSubscriptionModalContent: React.FC<
  RenewSubscriptionModalContentProps
> = ({ currentSubscription, onClose }) => {
  const apiClient = useApiClient();
  const queryClient = useQueryClient();

  const [isRenewLoading, setIsRenewLoading] = useState(false);
  const [step, setStep] = useState<ModalStep>(ModalStep.Confirm);

  const renewMutation = useRenewSubscription(apiClient, {
    onMutate: () => setIsRenewLoading(true),
    onSuccess: () => {
      setTimeout(() => {
        queryClient.invalidateQueries({ queryKey: ['subscriptionInfo'] });
        setIsRenewLoading(false);
        setStep(ModalStep.Success);
        toast({
          title: 'Subscription will renew.',
          status: 'info',
          duration: 3000,
          isClosable: true,
        });
      }, 2000);
    },
    onError: () => {
      setIsRenewLoading(false);
      toast({
        title: 'An error occurred',
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    },
  });

  if (step === ModalStep.Confirm) {
    return (
      <RenewConfirmStep
        currentSubscription={currentSubscription}
        isRenewLoading={isRenewLoading}
        onClose={onClose}
        onConfirmRenew={() => renewMutation.mutate(undefined)}
      />
    );
  }

  return <RenewSuccessStep onClose={onClose} />;
};

export default RenewSubscriptionModalContent;