import React from "react";
import {
  HeaderNavigation,
  ALIGN,
  StyledNavigationItem as NavigationItem,
  StyledNavigationList as NavigationList,
} from "baseui/header-navigation";
import { StyledLink as Link } from "baseui/link";
import { Block } from "baseui/block";

import Button from "../button/Button";

export interface HeaderProps {
  isLoggedIn?: boolean;
  left: React.ReactNode;
  center: React.ReactNode;
  right: React.ReactNode;
  user?: {};
  onLogin: () => void;
}

/**
 * This is the `<Header>` component <br />
 * Use this navigate the user to certain pages and display profile info
 */
const Header: React.FC<HeaderProps> = (props) => {
  const { isLoggedIn, onLogin, left, center, right } = props;

  return (
    <HeaderNavigation
      {...props}
      overrides={{
        Root: {
          style: ({ $theme }) => ({
            height: "69px",
            boxShadow: "0 2px 4px 0 rgba(127, 127, 127, 0.5)",
            backgroundColor: $theme.colors.white,
          }),
        },
      }}
    >
      <NavigationList $align={ALIGN.left}>
        <NavigationItem>{left}</NavigationItem>
      </NavigationList>

      <NavigationList $align={ALIGN.center}>
        <NavigationItem>{center}</NavigationItem>
      </NavigationList>

      <NavigationList $align={ALIGN.right}>
        {right}

        {isLoggedIn ? (
          <NavigationItem></NavigationItem>
        ) : (
          <Block display={["none", "none", "flex"]}>
            <NavigationItem>
              <Link href="/new/register">Registreren</Link>
            </NavigationItem>

            <NavigationItem style={{ paddingRight: "32px" }}>
              <Button
                size="default"
                shape="pill"
                kind="primary"
                onClick={onLogin}
              >
                Inloggen
              </Button>
            </NavigationItem>
          </Block>
        )}
      </NavigationList>
    </HeaderNavigation>
  );
};

export default Header;