import React, { ReactNode } from "react";
import classNames from "classnames";
import { PRODUCT_ID, PRODUCT_NAME, THEME } from "../../types";
import { Box } from "../Box";
import { Link } from "../Link";
import { MenuRenderer, useMenuContext } from "../MenuRenderer";
import { PopoverMenu } from "../PopoverMenu";
import { ProductIcon } from "../ProductIcon";
import { AppbarDropdownIcon } from "./AppbarDropdownIcon";
import { AppbarTabMarker } from "./AppbarTabMarker";
import { cn, popperModifiers } from "./config";

type AppbarProductMenuProps = {
  currentProductId: PRODUCT_ID;
  disabled?: boolean;
};

type AppbarProductMenuItemProps = {
  children: ReactNode;
  href: string;
};

type ProductConfig = {
  id: PRODUCT_ID;
  name: PRODUCT_NAME;
  url: string;
  hidden?: boolean;
};

const products: ProductConfig[] = [
  {
    id: PRODUCT_ID.EXCHANGE,
    name: PRODUCT_NAME.EXCHANGE,
    url: "https://exchange.aptible.com/",
    hidden: true,
  },
  {
    id: PRODUCT_ID.TRUST_CENTER,
    name: PRODUCT_NAME.TRUST_CENTER,
    url: "https://trust.aptible.com/",
  },
  {
    id: PRODUCT_ID.COMPLY,
    name: PRODUCT_NAME.COMPLY,
    url: "https://comply-grc.aptible.com/",
  },
  {
    id: PRODUCT_ID.DEPLOY,
    name: PRODUCT_NAME.DEPLOY,
    url: "https://dashboard.aptible.com/",
  },
];

export const AppbarProductMenuItem = ({
  children,
  href,
}: AppbarProductMenuItemProps) => {
  const { itemProps } = useMenuContext();
  return (
    <Link
      as="a"
      noStyles
      href={href}
      className={classNames([
        cn({ e: "menuItem" }),
        cn({ e: "productMenuItem" }),
      ])}
      {...itemProps}
    >
      {children}
    </Link>
  );
};

export const AppbarProductMenu = (props: AppbarProductMenuProps) => {
  const { currentProductId, disabled } = props;

  const productName: PRODUCT_NAME = products.filter(
    (product: ProductConfig) => product.id === currentProductId,
  )[0].name;

  return (
    <MenuRenderer
      className={classNames([cn({ e: "menu" }), cn({ e: "productMenu" })])}
      popperModifiers={popperModifiers}
      trigger={(triggerProps, { isOpen }) => (
        <button
          type="button"
          className={classNames([
            cn({ e: "menuButton" }),
            cn({ e: "productMenuButton" }),
            isOpen && "isOpen",
            "hasTabMarker",
          ])}
          disabled={disabled}
          {...triggerProps}
        >
          <Box>
            {productName}
            {!disabled && <AppbarDropdownIcon />}
          </Box>

          {!disabled && <AppbarTabMarker />}
        </button>
      )}
    >
      {({ listProps }) => (
        <PopoverMenu
          className={cn({ e: "menuList" })}
          theme={THEME.BRAND}
          {...listProps}
        >
          {products
            .filter((p) => !p.hidden)
            .map((product) => (
              <AppbarProductMenuItem key={product.id} href={product.url}>
                <ProductIcon className="mr-3" productId={product.id} />
                {product.name}
              </AppbarProductMenuItem>
            ))}
        </PopoverMenu>
      )}
    </MenuRenderer>
  );
};