import {Container, Image, Nav, Navbar, NavDropdown} from 'react-bootstrap';
import { User } from '@zenstackhq/runtime/models';
import { UserType } from '@prisma/client';
import { Link } from '@remix-run/react';

export type HeaderData = {user?: (User)} & {loggedin: boolean};

type Arguments = {data: HeaderData};

function Header(data: Arguments) {
  var loggedin = data.data.loggedin;
  
  var username = "";
  var showScanButtons = false;
  var showAdminButtons = false;

  if(loggedin && data.data.user){
    username = data.data.user.username;
    showScanButtons = (data.data.user.type == "Scanner");
    showAdminButtons = (data.data.user.type == "Admin");
  }

  return (
    <Navbar collapseOnSelect expand="md" className="bg-body-tertiary mb-3">
      <Container>
          <Navbar.Brand as={Link} to="/"><Image src="/favicon.ico" width="25" height="25" className="d-inline-block align-middle"></Image>FRIDGE</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav className="me-auto">
          { loggedin ? (
              <Nav.Link as={Link} to="/inventory">Inventory</Nav.Link>
            ) : "" }
              <Nav.Link as={Link} to="/inventory/stats">Stats</Nav.Link>
              <Nav.Link as={Link} to="/inventory/suggestions">Suggestions</Nav.Link>
            { showScanButtons ? (
              <Nav.Link as={Link} to="/scan">Scan</Nav.Link>
            ) : "" }
            { showAdminButtons ? (
              <Nav.Link as={Link} to="/admin">Admin</Nav.Link>
            ) : "" }
          </Nav>
          { loggedin ? (
            <Nav>
                <Nav.Link as={Link} to="/users">Users</Nav.Link>
                <Nav.Link as={Link} to="/logout">Logout ({username})</Nav.Link>
            </Nav>
          ) : (
            <Nav>
              <Nav.Link href="https://www.linkedin.com/in/kenneth-van-ewijk/">Kenneth</Nav.Link>
            </Nav>
          )}
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Header;