import React, { ReactNode } from "react";
import classNames from "classnames";
import { COMPLY_COMPANY_NAME, PRODUCT_ID } from "../../types";
import { Box, BoxProps } from "../Box";
import { Flex } from "../Flex";
import { LinkProps } from "../Link";
import { AppbarLogInButton } from "./AppbarLogInButton";
import { AppbarLogo } from "./AppbarLogo";
import { AppbarProductMenu } from "./AppbarProductMenu";
import { AppbarTabs, AppbarTab } from "./AppbarTabs";
import {
  AppbarUser,
  AppbarUserDropdown,
  AppbarUserDropdownMenu,
  AppbarUserDropdownMenuItem,
  AppbarUserAvatar,
} from "./AppbarUser";
import { AppbarOrganizations, AppbarOrganization } from "./AppbarOrganization";
import { AppbarClaimProfileButton } from "./AppbarClaimProfileButton";
import { cn } from "./config";
import { AppbarContext } from "./context";

type NavComponent = ReactNode;
type UserComponent = ReactNode;
type OrganizationComponent = ReactNode;

export interface AppbarProps extends BoxProps {
  /**
   * Which company is this?
   */
  company?: COMPLY_COMPANY_NAME;
  /**
   * An enum to define which product the appbar is rendered within. It will show
   * the product as "active" in the product menu
   *
   * DEPRECATED
   */
  currentProduct?: PRODUCT_ID;
  /**
   * A React element (`Appbar.Tabs`) to render the navigation
   */
  nav?: NavComponent;
  /**
   * A React element (`Appbar.User`) to render the user menu
   */
  user?: UserComponent;
  /**
   * A React element (`Appbar.Organizations`) to render the user menu
   */
  organization?: OrganizationComponent;
  /**
   * The logo is rendered as a link component; the props here are passed onto
   * the link component
   */
  logoProps?: LinkProps;
  /**
   * If true, adds "DEMO" text to the `Appbar`
   */
  isDemoEnvironment?: boolean;
  /**
   * Remove ability to click and open the product switcher
   *
   * DEPRECATED
   */
  isProductMenuDisabled?: boolean;
}

export const Appbar = (props: AppbarProps) => {
  const {
    company = COMPLY_COMPANY_NAME.APTIBLE,
    logoProps,
    nav,
    user,
    organization,
    currentProduct,
    className,
    isDemoEnvironment,
    isProductMenuDisabled,
    ...rest
  } = props;
  return (
    <AppbarContext.Provider value={{ company }}>
      <Box
        className={classNames(cn(), className, { isDemoEnvironment })}
        {...rest}
      >
        <AppbarLogo {...logoProps} />

        {currentProduct && (
          <AppbarProductMenu
            currentProductId={currentProduct}
            disabled={isProductMenuDisabled}
          />
        )}

        {nav}

        {(organization || user) && (
          <Box className="h-full ml-auto mr-3">
            <Flex className="items-center h-full">
              {organization && <Box className="mr-2">{organization}</Box>}

              {user}
            </Flex>
          </Box>
        )}
      </Box>
    </AppbarContext.Provider>
  );
};

Appbar.Tabs = AppbarTabs;
Appbar.Tab = AppbarTab;
Appbar.User = AppbarUser;
Appbar.UserDropdown = AppbarUserDropdown;
Appbar.UserDropdownMenu = AppbarUserDropdownMenu;
Appbar.UserDropdownMenuItem = AppbarUserDropdownMenuItem;
Appbar.LogInButton = AppbarLogInButton;
Appbar.ClaimProfileButton = AppbarClaimProfileButton;
Appbar.Organizations = AppbarOrganizations;
Appbar.Organization = AppbarOrganization;

// Deprecated: Remove this component in v2
Appbar.UserAvatar = AppbarUserAvatar;