import React, { useState, useEffect } from 'react';
import { Navbar, Nav, Container, Button, Offcanvas } from 'react-bootstrap';
import logo from '../../../assets/images/logo.png';
import logoWhite from '../../../assets/images/logo-w.png';
import { useLocation } from 'react-router-dom';

const MainNav = () => {
  const location = useLocation();
  const [scrolled, setScrolled] = useState(false);

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

  const handleScroll = () => {
    if (window.scrollY > 80) {
      setScrolled(true);
    } else {
      setScrolled(false);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  const getNavbarMenu = () => {
    if (location.pathname === '/') {
      return 'd-block flex-grow-1';
    } else{
      return 'd-none'
    }
  };

  return (
    <>
      <Navbar collapseOnSelect expand="lg" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}>
          <Container>
            {/* <Navbar.Brand href="#home" className='text-white'>
              <img
                alt=""
                src={logo}
                height="32"
                className="d-inline-block align-top"
              />{' '}
            </Navbar.Brand> */}
            <Navbar.Brand href="/" className='text-white'>
              <img
                alt=""
                src={(location.pathname === '/' || scrolled) ? logoWhite : logo}
                height="32"
                className="d-inline-block align-top"
              />{' '}
            </Navbar.Brand>
            <div className={getNavbarMenu()}>
              <div className='d-none d-lg-block'>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                  <Nav className="w-100 w-lg-75 justify-content-center">
                    <Nav.Link href="#hero" className='text-white me-3'>Home.</Nav.Link>
                    <Nav.Link href="#whatis" className='text-white me-3'>What Is.</Nav.Link>
                    <Nav.Link href="#feature" className='text-white me-3'>Feature.</Nav.Link>
                    <Nav.Link href="#youget" className='text-white me-3'>You Get.</Nav.Link>
                    <Nav.Link href="#contacts" className='text-white me-3'>Join Now.</Nav.Link>
                    <Nav.Link href="/signup" className='text-white me-3 d-block d-md-none'>Sign Up</Nav.Link>
                    <Nav.Link href="/login" className='text-white me-3 d-block d-md-none'>Login</Nav.Link>
                  </Nav>
                  <Nav className='d-flex'>
                    <Button as='a' href='/signup' variant='white-blue' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Sign<span className="ts">_</span>Up</Button>
                    <Button as='a' href='/login' variant='outline-white' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Login</Button>
                  </Nav>
                </Navbar.Collapse>
              </div>
              <div className='d-flex d-lg-none justify-content-end'>
                <Button variant="outline-white" onClick={handleShow}>
                  <i className="bi bi-list text-white"></i>
                </Button>
              </div>
            </div>
          </Container>
      </Navbar>
      <Offcanvas show={show} onHide={handleClose} placement='end'>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Menu</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <Nav.Link href="#hero" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
          <Nav.Link href="#whatis" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>What Is.</Nav.Link>
          <Nav.Link href="#feature" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Feature.</Nav.Link>
          <Nav.Link href="#youget" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>You Get.</Nav.Link>
          <Nav.Link href="#contacts" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top border-bottom text-blue'>Join Now.</Nav.Link>
          <div className="d-flex w-100 justify-content-between mt-2">
            <Nav.Link href="/signup" onClick={() => setShow(false)} className='fs-3 w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
            <Nav.Link href="/login" onClick={() => setShow(false)} className='fs-3 w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
          </div>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
};

export default MainNav;
