import { Link as RouterLink, useLocation } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Button, Link, Container, Typography } from '@mui/material';
// layouts
import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
// routes
import { PATH_AUTH } from '@/routes/paths';
// components
import Page from '@/components/Page';
import Iconify from '@/components/Iconify';
// sections
import { VerifyCodeForm } from '@/sections/auth/verify-code';
import { useState, useContext, useEffect } from 'react';
import { LanguageContext } from '@/contexts/LanguageContext';
import axios from '@/utils/axios';

// ----------------------------------------------------------------------

const RootStyle = styled('div')(({ theme }) => ({
  display: 'flex',
  height: '100%',
  alignItems: 'center',
  padding: theme.spacing(12, 0),
}));

function useQuery() {
    return new URLSearchParams(useLocation().search);
  }

// ----------------------------------------------------------------------

export default function VerifyCode() {
    const { localeData } = useContext(LanguageContext);
    const query = useQuery();
  const email = query.get('email');
  const [timer, setTimer] = useState(60); // Initialize timer with 60 seconds
  const [canResend, setCanResend] = useState(false); // State to control resend button visibility
  useEffect(() => {
    const interval = setInterval(() => {
      setTimer((prev) => {
        if (prev > 0) {
          return prev - 1;
        } else {
          clearInterval(interval);
          setCanResend(true); // Enable resend button when timer reaches 0
          return 0;
        }
      });
    }, 1000);

    return () => clearInterval(interval); // Cleanup interval on component unmount
  }, []);

  const handleResend = () => {
    setCanResend(false);
    setTimer(60); // Reset timer to 60 seconds
    // Add logic to resend the code here
    axios.post('/verify-email', {email: email});
  };

  return (
    <Page title="Verify" sx={{ height: 1 }}>
      <RootStyle>
        <LogoOnlyLayout />

        <Container>
          <Box sx={{ maxWidth: 480, mx: 'auto' }}>
            <Button
              size="small"
              component={RouterLink}
              to={PATH_AUTH.resetPassword}
              startIcon={<Iconify icon={'eva:arrow-ios-back-fill'} width={20} height={20} />}
              sx={{ mb: 3 }}
            >
                {localeData.txtBack}
            </Button>

            <Typography variant="h3" paragraph>
              {localeData.txtCheckEmail}
            </Typography>
            <Typography variant='subtitle1'>{email}</Typography>
            <Typography sx={{ color: 'text.secondary' }}>
            {localeData.txtEmail}
            </Typography>

            <Box sx={{ mt: 5, mb: 3 }}>
              <VerifyCodeForm
              onGetEmail={email}
              />
            </Box>

            {/* <Typography variant="body2" align="center">
              Don’t have a code? &nbsp;
              <Link variant="subtitle2" underline="none" onClick={() => {}}>
                Resend code
              </Link>
            </Typography> */}
            <Typography variant="body2" align="center">
                {localeData.txtDont} &nbsp;
              {canResend ? (
                <Link sx={{cursor: 'pointer'}} variant="subtitle2" underline="none" onClick={handleResend}>
                  {localeData.txtResendCode}
                </Link>
              ) : (
                <span>{`${localeData.txtResendCode} ${timer} ${localeData.txtSecond}`}</span>
              )}
            </Typography>
          </Box>
        </Container>
      </RootStyle>
    </Page>
  );
}