import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { Dropdown, DropdownProps } from "../dropdown";
import { useConfig } from "../_util/config-context";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";

export interface NavMenuItemProps extends StyledProps {
  /**
   * 菜单项类型
   *
   * - `default` 默认文字类型菜单项
   * - `logo` 导航 Logo
   * - `dropdown` 包含下拉的菜单项
   * - `icon` 图标类型菜单项
   *
   * @default "default"
   */
  type?: "default" | "logo" | "dropdown" | "icon";

  /**
   * 菜单项是否为选中样式
   *
   * @default false
   */
  selected?: boolean;

  /**
   * 菜单项点击回调
   */
  onClick?: (event: React.MouseEvent) => void;

  /**
   * 菜单项内容
   */
  children?: React.ReactNode;

  /**
   * `type="dropdown"` 时弹出层内容
   * @docType React.ReactNode | ((close: () => void) => React.ReactNode)
   */
  overlay?: DropdownProps["children"];
}

export const NavMenuItem = React.forwardRef(function NavMenuItem(
  {
    type = "default",
    selected,
    className,
    overlay,
    children,
    ...props
  }: NavMenuItemProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const wrapperProps = {
    className: classNames(className, {
      [`${classPrefix}-nav__service`]: type === "default",
      [`${classPrefix}-nav__logo`]: type === "logo",
      [`${classPrefix}-nav__dropdown`]: type === "dropdown",
      [`${classPrefix}-nav__operation`]: type === "icon",
      "is-selected": selected,
    }),
    ...props,
  };

  if (type === "dropdown") {
    return (
      <div ref={ref} {...wrapperProps}>
        <Dropdown
          trigger="hover"
          button={children}
          clickClose={false}
          boxClassName={`${classPrefix}-nav__dropdown-box`}
          placementOffset={0}
        >
          {overlay}
        </Dropdown>
      </div>
    );
  }

  if (type === "icon") {
    return (
      <div ref={ref} {...wrapperProps}>
        <a className={`${classPrefix}-nav__operation-inner`}>{children}</a>
      </div>
    );
  }

  if (type === "logo") {
    return (
      <div ref={ref} {...wrapperProps}>
        <a>{children}</a>
      </div>
    );
  }

  // default
  if (typeof children === "string") {
    return (
      <div ref={ref} {...wrapperProps}>
        <a className={classNames({ "is-selected": selected })}>{children}</a>
      </div>
    );
  }
  return (
    <div ref={ref} {...wrapperProps}>
      {children}
    </div>
  );
});

NavMenuItem.displayName = "NavMenuItem";

export interface NavMenuProps extends StyledProps {
  /**
   * 导航左侧 <NavMenu.Item />
   */
  left?: React.ReactNode;

  /**
   * 导航右侧 <NavMenu.Item />
   */
  right?: React.ReactNode;
}

export const NavMenu = forwardRefWithStatics(
  function NavMenu(
    { left, right, className, ...props }: NavMenuProps,
    ref: React.Ref<HTMLElement>
  ) {
    const { classPrefix } = useConfig();
    return (
      <nav
        ref={ref}
        className={classNames(`${classPrefix}-nav`, className)}
        {...props}
      >
        {left}
        <div className={`${classPrefix}-nav__flex-end`} />
        {right}
      </nav>
    );
  },
  {
    Item: NavMenuItem,
  }
);

NavMenu.displayName = "NavMenu";