import React, { useState } from 'react';
import { Navbar, Container, Nav, Modal, Button, OverlayTrigger, Tooltip, Offcanvas } 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 { headerSection, headerTopic, headerLevel } from '../../../utils/Constant';

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

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

const UserNavbar = () => {
  const { user, logout } = useAuth();

  const location = useLocation();
  const navigate = useNavigate();

  const pathSegments = location.pathname.split('/');
  const hasTopicAndLevel = pathSegments.length == 7 && pathSegments[4] && pathSegments[5];

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

  const [showMenu, setShowMenu] = useState(false);
  const handleCloseMenu = () => setShowMenu(false);
  const handleShowMenu = () => setShowMenu(true);

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

  const handleLogout = () => {
    logout();
  };
  
  const lastSegment = location.pathname.split('/').filter(Boolean).pop();
  const bgBlue = () => {
    let blue = true;
    switch (lastSegment) {
      case 'exercise':
          blue = false;
        break;
    
      default:
          blue = true;
        break;
    }

    return blue;
  };

  return (
    <>
      <Navbar bg={bgBlue() ? 'blue' : 'white'} expand="md" fixed="top">
        <Container fluid className='px-md-0'>
          <Navbar.Brand as={Link} to="/learning" className='col-md-3 col-lg-2 d-flex items-center'>
            <img
              alt="logo"
              src={bgBlue() ? logoW : logo}
              height="32"
            />
          </Navbar.Brand>
          {/* <Navbar.Toggle className='custom-toggle shadow-none border-white' /> */}
          <Button variant="btn-outline-white" onClick={handleShowMenu} className='border py-0 d-block d-md-none'>
            <i className="bi bi-list text-white fs-3"></i>
          </Button>
          <div className="d-none d-md-block navbar-title col-md-6 col-lg-8">
            {hasTopicAndLevel ? (
              lastSegment === 'review' ? (
                <h5 className={`text-center m-0 ${bgBlue() ? 'text-white' : 'text-blue'}`}>
                  {headerSection} : {headerTopic}
                  <span className='text-dark'> - {headerLevel}</span>
                </h5>
              ):(
                lastSegment === 'exercise' ? (
                  <h5 className={`text-center m-0 ${bgBlue() ? 'text-white' : 'text-blue'}`}>
                    {`${unSlugify(pathSegments[3])} : ${unSlugify(pathSegments[4])} `}
                    <span className='text-dark'> - {unSlugify(pathSegments[5])}</span>
                  </h5>
                ):(
                  <h5 className={`text-center m-0 ${bgBlue() ? 'text-white' : 'text-blue'}`}>
                    {unSlugify(pathSegments[4])}
                  </h5>
                )
              )
            ):('')}
          </div>
          <Navbar.Collapse id="navbar-nav" className='col-md-3 col-lg-2 d-none d-md-flex items-center'>
            <Nav className={bgBlue() ? 'd-flex' : 'd-none'}>
              <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.Link href="#">
                <i className="bi bi-headset"></i>
              </Nav.Link>
              <Nav.Link href="#" onClick={handleShow}>
                <i className="bi bi-box-arrow-right"></i>
              </Nav.Link> */}

            </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>

      <Offcanvas show={showMenu} onHide={handleCloseMenu} placement={'end'}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Menu</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body className='h-100'>
          <Nav.Link as={Link} to="home" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
          <Nav.Link as={Link} to="module" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Learning.</Nav.Link>
          <Nav.Link as={Link} to="history" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>History.</Nav.Link>
          <Nav.Link as={Link} to="setting" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Setting.</Nav.Link>
          <div className="d-flex w-100 justify-content-between mt-2">
            <Nav.Link onClick={() => (handleCloseMenu(), handleShowReport())} className='fs-3 w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Report</Nav.Link>
            <Nav.Link onClick={() => (handleCloseMenu(), handleShow())} className='fs-3 w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-red rounded-3'>Logout</Nav.Link>
          </div>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
};

export default UserNavbar;
