import React, { useEffect } from 'react'
import { trpc } from '@/utils/trpc'
import { toast } from 'react-toastify'
import { useRouter } from 'next/router'
import { Button, Box, Typography } from '@mui/material'
import PlanContainer from '../plans/PlanContainer'
import { useUserContext } from '@/context/UserContext'

const BillingManagement = () => {
  const router = useRouter();
  const { userData, session_valid, userSessionDataLoading } = useUserContext()
  const { data: portalSessionData, mutateAsync: getPortalSession,  } = trpc.stripe.portal.useMutation();
  const { data: checkoutSessionData, mutateAsync: getCheckoutSession, isLoading: checkoutSessionIsLoading } = trpc.stripe.checkoutSession.useMutation()
  const { data: customerSubscriptions } = trpc.stripe.getSubscriptionData.useQuery({stripeCustomerId: userData?.stripeCustomerId!, session_valid})

  const goToCheckout = async () => {
    await getCheckoutSession()
    .then((checkoutSessionData) => {
      router.push(checkoutSessionData)
    }).catch((error) => {
      toast.error(error.message)
    })
  }

  const loadPortal = async () => {
    const session = await getPortalSession()
    router.push(session.url);
  }

  return (
    <Box
      sx={{
        maxWidth: '500px',
      }}
    >
      <Typography variant='h3'>Billing</Typography>
      <Typography variant='subtitle1'>Manage billing and update subscription plan.</Typography>
      {!userSessionDataLoading && userData.isSubscribed ? (
        <>
          <Button
            variant='contained'
            onClick={() => loadPortal()}
          >
            Manage Subscription
          </Button>
        </>
      ) : (
        <>
          <Button
            variant='contained'
            onClick={() =>{
              if (checkoutSessionIsLoading) return;
              else goToCheckout()
            }}
          >
            {checkoutSessionIsLoading ? 'Loading...' : 'Get Checkout Session'}
          </Button>
        </>
      )}
    </Box>
  )
}

export default BillingManagement