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

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>
        <LinkContainer to="/">
          <Navbar.Brand>K-FRIDGE</Navbar.Brand>
        </LinkContainer>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav className="me-auto">
          { loggedin ? (
            <LinkContainer to="/inventory">
              <Nav.Link>Inventory</Nav.Link>
            </LinkContainer>
            ) : "" }
            <LinkContainer to="/inventory/stats">
              <Nav.Link>Stats</Nav.Link>
            </LinkContainer>
            { showScanButtons ? (
            <LinkContainer to="/scan">
              <Nav.Link>Scan</Nav.Link>
            </LinkContainer>
            ) : "" }
            { showAdminButtons ? (
            <LinkContainer to="/admin">
              <Nav.Link>Admin</Nav.Link>
            </LinkContainer>
            ) : "" }
          </Nav>
          { loggedin ? (
            <Nav>
              <LinkContainer to="/logout">
                <Nav.Link>Logout ({username})</Nav.Link>
              </LinkContainer>
            </Nav>
          ) : (
            <Nav>
              <Nav.Link href="https://www.linkedin.com/in/kenneth-van-ewijk/">Kenneth</Nav.Link>
            </Nav>
          )}
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Header;