import Navbar from 'react-bootstrap/Navbar';
import { imageDataURIs } from '../../ImageExports';
import { Button, Container } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import { breakpoints } from '../../utils/BootstrapHelper';
import { Fragment } from 'react/jsx-runtime';
import { useMsal } from '@azure/msal-react';
import { useAuth } from '../../auth/AuthProvider';

// Header component
function Header({
  toggleSidebar,
  fullHeader,
  navbarButtonRef,
}: {
  toggleSidebar: () => void;
  fullHeader: boolean;
  navbarButtonRef: React.MutableRefObject<HTMLElement | null>;
}) {
  const navigate = useNavigate();
  const isMobile = useMediaQuery({ maxWidth: breakpoints.md - 1 });

  const { user } = useAuth();
  const { instance } = useMsal();

  const handleLogoutRedirect = () => {
    instance.logoutRedirect({
      onRedirectNavigate: () => {
        // Return false if you would like to stop navigation after local logout
        return false;
      },
    });
  };

  return (
    <Navbar
      bg='dark'
      variant='dark'
      fixed='top'
      expand=''
      className='flex-column'
    >
      {
        // Show only a cut down version of the header for certain pages
        // (defined in AppRoutes)
        fullHeader ? (
          <Container
            fluid
            className={'d-flex justify-content-between align-items-center px-3'}
          >
            <div className='d-flex align-items-center'>
              <Navbar.Toggle
                aria-controls='navbar-nav'
                onClick={toggleSidebar}
                className='me-3'
                // @ts-ignore
                ref={navbarButtonRef}
              ></Navbar.Toggle>
              <Navbar.Brand onClick={() => navigate('/')} role='button'>
                <img
                  src={imageDataURIs.ShipMeLogoWhite}
                  height='40'
                  className='d-inline-block align-top'
                  alt='ShipME logo'
                />
              </Navbar.Brand>
            </div>
            <div className='d-flex align-items-center'>
              {
                // Show reduced header content for mobile users
                isMobile ? (
                  <Fragment>
                    <Button
                      variant='danger'
                      onClick={() => handleLogoutRedirect()}
                    >
                      Log Out
                    </Button>
                  </Fragment>
                ) : (
                  <Fragment>
                    <Navbar.Brand
                      onClick={() => navigate('/settings')}
                      role='button'
                      className='d-flex align-items-center'
                    >
                      <img
                        src={imageDataURIs.ShipMeIcon}
                        alt='Icon'
                        className='rounded-circle'
                        style={{ width: '40px', height: '40px' }}
                      />
                      <span className='text-white ms-2'>
                        Hi, {user?.first_name} {user?.last_name}
                      </span>
                    </Navbar.Brand>
                    <Button
                      variant='danger'
                      onClick={() => handleLogoutRedirect()}
                    >
                      Log Out
                    </Button>
                  </Fragment>
                )
              }
            </div>
          </Container>
        ) : (
          <Container
            fluid
            className={'d-flex justify-content-center align-items-center'}
          >
            <Navbar.Brand
              className='me-0'
              onClick={() => navigate('/')}
              role='button'
            >
              <img
                src={imageDataURIs.ShipMeLogoWhite}
                height='40'
                className='d-inline-block align-top'
                alt='ShipME logo'
              />
            </Navbar.Brand>
          </Container>
        )
      }
    </Navbar>
  );
}

export default Header;