import { useState, useContext } from 'react';
import { Link as RouterLink } from 'react-router-dom';
// @mui
import { styled } from '@mui/material/styles';
import { Box, Button, Container, Typography } from '@mui/material';
// layouts
import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
// routes
import { PATH_AUTH } from '@/routes/paths';
// components
import Page from '@/components/Page';
// sections
import { ResetPasswordForm } from '@/sections/auth/reset-password';
// assets
import { SentIcon } from '@/assets';
import { LanguageContext } from '@/contexts/LanguageContext';

import { useNavigate } from 'react-router-dom'; // Import useNavigate

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

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

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

export default function ResetPassword() {
    const { localeData } = useContext(LanguageContext);
  const [email, setEmail] = useState('');

  const [sent, setSent] = useState(false);

  const navigate = useNavigate();

  const handleSent = () => {
    setSent(true);
  };

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

        <Container>
          <Box sx={{ maxWidth: 480, mx: 'auto' }}>
            {!sent ? (
              <>
                <Typography variant="h3" paragraph>
                  {localeData.txtForgotYourPassword}
                </Typography>

                <Typography sx={{ color: 'text.secondary', mb: 5 }}>
                  {localeData.txtPleaseEnterPassword}
                </Typography>

                <ResetPasswordForm
                  onSent={handleSent}
                  onGetEmail={(value) => setEmail(value)}
                />

                <Button
                  fullWidth
                  size="large"
                  component={RouterLink}
                  to={PATH_AUTH.login}
                  sx={{ mt: 3 }}
                >
                  {localeData.txtBack}
                </Button>
              </>
            ) : (
              <Box sx={{ textAlign: 'center' }}>
                <SentIcon sx={{ mb: 5, mx: 'auto', height: 160 }} />

                <Typography variant="h3" gutterBottom>
                  {localeData.txtSuccessSend}
                </Typography>

                <Typography>
                  {localeData.txtCodeConfirm} &nbsp;
                  <strong>{email}</strong>
                  <br />
                  {localeData.txtPleasCheck}
                </Typography>

                <Button
                  size="large"
                  variant="contained"
                  component={RouterLink}
                  to={PATH_AUTH.verify}
                  sx={{ mt: 5 }}
                >
                  Next
                </Button>
              </Box>
            )}
          </Box>
        </Container>
      </RootStyle>
    </Page>
  );
}