import cn from "classnames";
import { Modifiers } from "popper.js";
import React, { forwardRef, Ref, useState } from "react";
import { Icon, NavbarItem, NavLink, Popover, PopoverBody } from "../";
import { IPopoverProps } from "../popover/popover";
import appsIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/apps.svg";
import ListGroup, { IListGroupProps } from "../list/list-group";
import Button from "../button/button";
import { INavLinkProps } from "../nav/nav-link";
import { AsComponent, AsPropsWithChildren } from "../utils/asComponent";

export interface ICloudBeesNavigationProps
  extends AsPropsWithChildren,
    React.HTMLAttributes<HTMLElement> {
  modifiers?: Modifiers;
  avoidPreRender?: boolean;
  header?: React.ReactNode;
  innerClassName?: string;
  popoverProps?: IPopoverProps;
  popoverBodyClassName?: string;
  /**
   * Overrides default id used for accessibility
   */
  popoverBodyId?: string;
  listGroupProps?: IListGroupProps;
  buttonProps?: INavLinkProps;
}

type CloudBeesNavigation = AsComponent<typeof ListGroup, ICloudBeesNavigationProps>;
const CloudBeesNavigation: CloudBeesNavigation = forwardRef(
  (
    {
      popoverBodyId = "cloudbees-navigation-body",
      children,
      className,
      modifiers,
      avoidPreRender,
      header,
      innerClassName,
      as,
      popoverProps,
      popoverBodyClassName,
      listGroupProps,
      buttonProps,
      ...props
    },
    ref: Ref<HTMLDivElement>
  ) => {
    const [active, setActive] = useState(false);

    const testId = props["data-testid"] || "honeyui-cloudBees-navigation";

    return (
      <NavbarItem
        {...{ as: "div", className: cn(className, { active }), ref, "data-testid": testId }}
        {...props}
      >
        <Popover
          {...{
            flexibleContent: true,
            modifiers,
            onToggle: value => setActive(value),
            placement: "bottom-start",
            reference: (
              <NavLink
                {...{ as: Button, variant: "link", "data-testid": `${testId}-link` }}
                aria-haspopup="true"
                aria-expanded={active ? "true" : undefined}
                aria-controls={popoverBodyId}
                {...buttonProps}
              >
                <Icon {...{ currentColor: true, id: appsIcon.id, size: "md" }} />
              </NavLink>
            ),
            "data-testid": `${testId}-popover`,
            avoidPreRender
          }}
          {...popoverProps}
        >
          <PopoverBody
            id={popoverBodyId}
            className={cn("collapsible-container px-0", popoverBodyClassName)}
          >
            <ListGroup
              header={header}
              className={cn("list-group-flush", innerClassName)}
              as={as}
              {...listGroupProps}
            >
              {children}
            </ListGroup>
          </PopoverBody>
        </Popover>
      </NavbarItem>
    );
  }
);

CloudBeesNavigation.displayName = "CloudBees navigation";

export default CloudBeesNavigation;