import React, { useEffect }from 'react';
import useAuth from '../hooks/useForgot';
import { Container, Row, Col, Form, Button, Modal } from 'react-bootstrap';
import { Link, useParams } from 'react-router-dom';

import illustration from '../../../../assets/images/illustration/changePass.png';
import successIllustration from '../../../../assets/images/illustration/successModal.png';
import ask from '../../../../assets/images/illustration/IllustrationForgot.png';

const ResetPass = () => {
    const { token } = useParams();
    const { 
        pass,
        setPass,
        confirmPass,
        setConfirmPass,

        updatePassword, 
        loading, 
        showLoader,
        handleCloseLoader,
        modalMessage,
        modalType
    } = useAuth();

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

  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="formBasicPass">
                      <Form.Label>New Password <span className='text-danger'>*</span></Form.Label>
                      <Form.Control type="password" placeholder="New Password"
                        value={pass}
                        onChange={(e) => setPass(e.target.value)}
                      />
                  </Form.Group>
                  <Form.Group className="mb-4" controlId="formBasicConfirm">
                      <Form.Label>Confirm New Password <span className='text-danger'>*</span></Form.Label>
                      <Form.Control type="password" placeholder="Confirm New Password"
                        value={confirmPass}
                        onChange={(e) => setConfirmPass(e.target.value)}
                      />
                  </Form.Group>
                  <Button type="submit"  variant="gd" className='w-100'  disabled={loading}>
                    {loading ? 'Loading...' : 'Reset'}
                  </Button>
                </Form>
            </div>
          </div>
        </Col>
      </Row>
      <Modal show={showLoader} onHide={handleCloseLoader} centered backdrop="static">
          {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={ask} 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'>All Set!</h4>
                    <img src={successIllustration} alt="" className="w-50"/>
                    <p className='my-3 text-muted fw-light text-center'>{modalMessage}</p>
                    <Link to='/login' className="btn btn-gd w-100 py-2 px-5 rounded-35">Login</Link>
                </Modal.Body> 
          )}
      </Modal>
    </Container>
  );
};

export default ResetPass;
