import React, { useState }from 'react';
import useAuth from '../hooks/useForgot';
import { Container, Row, Col, Form, Button, Modal } from 'react-bootstrap';

import illustration from '../../../../assets/images/illustration/IllustrationForgot.png';
import successIllustration from '../../../../assets/images/illustration/mail.png';

const ForgotPage = () => {
  const { 
    user,
    setUser,
    forgotPassword, 
    loading, 
    error,
    showLoader,
    handleShowLoader,
    handleCloseLoader,
    modalMessage,
    modalType
  } = useAuth();

  const onSubmit = async (e) => {
    e.preventDefault();
    await forgotPassword();
  };

  return (
    <Container fluid className='h-screen bg-blue-50'>
      <Row className='h-100'>
        <Col md={6} className="d-flex items-center">
          <div className='w-75'>
            <img src={illustration} alt="" className='w-75'/>
          </div>
        </Col>
        <Col md={6} className="bg-white d-flex items-center rounded-5 rounded-end shadow">
          <div className='w-75'>
            <h1 className='text-blue fw-bold mb-3'>Forgot Password?</h1>
            <p className='mb-5'>
                Don’t worry, we will help you... <br />
                Enter your email and wait for a link to reset the password.
            </p>
            <div className='bg-gd rounded w-100' style={{padding:"1px"}}>
                <Form className='bg-white rounded p-4' onSubmit={onSubmit}>
                  <Form.Group className="mb-4" controlId="formBasicEmail">
                      <Form.Label>Email Address <span className='text-danger'>*</span></Form.Label>
                      <Form.Control type="email" placeholder="Email Address"
                        value={user || ''}
                        onChange={(e) => setUser(e.target.value)}
                      />
                  </Form.Group>
                  <Button type="submit"  variant="gd" className='w-100'  disabled={loading}>
                    {loading ? 'Loading...' : 'Submit'}
                  </Button>

                  {error && <p>{error}</p>}
                  
                  <p className='mt-4 text-center'>Remember the password? Just <a href="/login" className='text-blue'>Log In</a></p>
                </Form>
            </div>
          </div>
        </Col>
      </Row>
      <Modal show={showLoader} onHide={handleCloseLoader} centered>
          {modalType === "ERROR"?(
                <Modal.Body className='p-4 d-flex flex-column items-center'>
                    <h4 className='mb-4 fw-bold text-red'>ERROR!</h4>
                    <img src={illustration} alt="" className="w-50"/>
                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
                    <Button variant="red" className="w-100 py-2 px-5 rounded-35" onClick={handleCloseLoader}>Close</Button>
                </Modal.Body>
            ):(
                <Modal.Body className='p-4 d-flex flex-column items-center'>
                    <h4 className='mb-4 fw-bold text-dark'>Check <span className='text-blue'> Email</span>!</h4>
                    <img src={successIllustration} alt="" className="w-50"/>
                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
                    <a className="btn btn-gd w-100 py-2 px-5 rounded-35" href='https://mail.google.com/mail/'>Check Email</a>
                </Modal.Body> 
          )}
      </Modal>
    </Container>
  );
};

export default ForgotPage;
