import React, { useState } from 'react';
import { Navbar, Container, Nav, Modal, Button, OverlayTrigger, Tooltip  } from 'react-bootstrap';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import logo from '../../../assets/images/logo.png';
import logoW from '../../../assets/images/logo-w.png';
import logoutIllustration from '../../../assets/images/illustration/logout.png';
import useAuth from '../../../roles/guest/auth/hooks/useAuth';

import Report from '../../../roles/user/report/views/Report';

import { unSlugify } from '../../../utils/Constant';

const TeacherNavbar = () => {
  const { logout } = useAuth();

  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const [showReport, setShowReport] = useState(false);
  const handleCloseReport = () => setShowReport(false);
  const handleShowReport = () => setShowReport(true);

  const handleLogout = () => {
    logout();
  };

  return (
    <>
      <Navbar bg='blue' expand="md" fixed="top">
        <Container fluid className='px-0'>
          <Navbar.Brand as={Link} to="/learning" className='col-md-3 col-lg-2 d-flex items-center'>
            <img
              alt="logo"
              src={logoW}
              height="32"
            />
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="navbar-nav" />
          <div className="navbar-title col-md-6 col-lg-8">

          </div>
          <Navbar.Collapse id="navbar-nav" className='col-md-3 col-lg-2 d-flex items-center'>
            <Nav className="d-flex">
              <OverlayTrigger
                placement='bottom'
                overlay={
                  <Tooltip id='t-report'>report</Tooltip>
                }
              >
                <Nav.Link onClick={handleShowReport}>
                  <i className="bi bi-headset"></i>
                </Nav.Link>
              </OverlayTrigger>

              <OverlayTrigger
                placement='bottom'
                overlay={
                  <Tooltip id='t-logout'>Logout</Tooltip>
                }
              >
                <Nav.Link onClick={handleShow}>
                  <i className="bi bi-box-arrow-right"></i>
                </Nav.Link>
              </OverlayTrigger>

            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Modal show={show} onHide={handleClose} centered>
        <Modal.Body className='p-4 d-flex flex-column items-center'>
          <h4 className='mb-4 fw-bold text-dark'>Time to <span className='text-danger'>logout</span>?</h4>
          <img src={logoutIllustration} alt="" />
          <p className='my-3 text-muted fw-light'>Confirm logout? We’ll be here when you return.</p>
          <div className="mt-4 w-100 d-flex justify-content-center">
            <Button variant="outline-muted" className="py-2 px-5 mx-1 rounded-35" onClick={handleClose}>No, I'll stay</Button>
            <Button variant="danger" className="py-2 px-5 mx-1 rounded-35" onClick={handleLogout}>Yes, I'm done</Button>
          </div>
        </Modal.Body>
      </Modal>

      <Modal centered show={showReport} onHide={handleCloseReport} size='lg'>
        <Report onClose={handleCloseReport}/>
      </Modal>
    </>
  );
};

export default TeacherNavbar;
