import { chakra, Flex, Link } from "@chakra-ui/react";
import React from "react";
import MateLogo from "./MateLogo";

interface Props {
  //** Optional URL for the logo */
  logo?: boolean;
  //** Optional Title */
  title?: string;
  //** Optional home link, if not, will default to window.location.origin */
  homeLink?: string;
  //** Navlinks */
  navlinks?: NavLink[];
  /**
   * CTA items rendered on the RHS of the nav.
   * Examples could be <Avatar/> or <Button/>
   */
  ctaItems?: React.ReactNode[];
}

interface NavLink {
  text: string;
  path?: string;
  action?: () => void;
  children?: NavLink[];
  hidden?: boolean;
}

export const NavBar = (props: Props) => {
  return (
    <chakra.header
      backgroundColor="brand.primary"
      zIndex={1000}
      w="full"
      h="5rem"
      pos="fixed"
      top="0"
      left="0"
      px={10}
      // py={12}
      mb="5rem"
    >
      <Flex w="100%" h="100%" flexDir="row" alignItems="center">
        {/* Title/logo */}
        <Link
          href={props.homeLink ? props.homeLink : ""}
          d="flex"
          alignItems="center"
          mr="56px"
          // mr={8}
        >
          <MateLogo />
        </Link>

        {/* Nav items */}
        <Flex w="100%" justify="start" align="center">
          {props.navlinks &&
            props.navlinks.length > 0 &&
            props.navlinks
              .filter((nl) => !nl.hidden)
              .map((navLink, i) => {
                return (
                  // Dependign on whether you're using SSR (nextjs) or ReactRouter,
                  // you may need to change this link to support active routes
                  <Link
                    _active={{ color: "neutral.white" }} //This isn't working
                    textStyle="body.mediumBold"
                    color="grey.g05"
                    href={navLink.path ?? ""}
                    mr="40px"
                    key={i}
                    onClick={navLink.action}
                    w="max-content"
                    _hover={{ color: "neutral.white" }}
                  >
                    {navLink.text}
                  </Link>
                );
              })}
        </Flex>

        {/* CTA Items on RHS */}
        <Flex w="100%" justify="flex-end" alignItems="center">
          {props.ctaItems?.map((ctaItem, i) => (
            <React.Fragment key={i}>{ctaItem}</React.Fragment>
          ))}
        </Flex>
      </Flex>
    </chakra.header>
  );
};