import { useQuery } from '@tanstack/react-query'
import { Alert, Button } from '@/components/ui'
import { useNavigate, useParams } from 'react-router-dom'
import useAccount from '@/utils/hooks/useAccount'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Helmet } from 'react-helmet'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { APP_NAME } from '@/constants/app.constant'

const VerifyConfirmationCode = () => {
  const { userId, token } = useParams()
  const { message, error, verifyConfirmationCode } = useAccount()
  const navigate = useNavigate()
  const { translate } = useLocalization()

  useQuery({
    queryKey: ['verifyConfirmationCode', userId, token],
    queryFn: () => verifyConfirmationCode(userId!, token!),
    retry: false,
    refetchOnWindowFocus: false,
  })

  return (
    <>
      <Helmet
        titleTemplate={`%s | ${APP_NAME}`}
        title={translate('::' + 'Abp.Account.VerifyConfirmationCode')}
        defaultTitle={APP_NAME}
      ></Helmet>

      <div>
        {message && (
          <Alert showIcon className="mb-4" type="success">
            {message}
          </Alert>
        )}
        {error && (
          <div>
            <Alert showIcon className="mb-4" type="danger">
              {error}
            </Alert>
            <Button
              block
              variant="solid"
              onClick={() => navigate(ROUTES_ENUM.authenticated.sendConfirmationCode)}
            >
              {translate('::Abp.Account.VerifyConfirmationCode')}
            </Button>
          </div>
        )}
      </div>
    </>
  )
}

export default VerifyConfirmationCode