import React, { forwardRef } from "react";
import cn from "classnames";
import ListGroupItem, { IListGroupItemProps } from "../list/list-group-item";
import { AsComponent, AsPropsWithChildren } from "../utils/asComponent";

type itemVariants =
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | "info"
  | "dark"
  | "light";

export interface ICloudBeesNavigationItemProps
  extends AsPropsWithChildren,
    Omit<IListGroupItemProps, "title"> {
  isActive?: boolean;
  onClick?: (event: React.SyntheticEvent) => void;
  href?: string;
  variant?: itemVariants;
  title?: React.ReactNode | React.ReactNode[];
  subText?: React.ReactNode | React.ReactNode[];
  icon?: React.ReactNode | React.ReactNode[];
  badge?: React.ReactNode | React.ReactNode[];
}

export type CloudBeesNavigationItem = AsComponent<"li", ICloudBeesNavigationItemProps>;

const CloudBeesNavigationItem: CloudBeesNavigationItem = forwardRef(
  (
    {
      className,
      isActive,
      onClick,
      variant,
      subText,
      title,
      icon,
      badge,
      href,
      as: Component = "li",
      ...props
    },
    ref
  ) => {
    const testId = props["data-testid"] || "honeyui-list-group-item";

    return (
      <ListGroupItem
        {...props}
        ref={ref}
        className={cn(
          "list-group-item",
          variant && `list-group-item-${variant}`,
          "border-0",
          {
            active: isActive,
            "cursor-pointer": onClick,
            "list-group-item-action": onClick || Component === "a"
          },
          className
        )}
        data-testid={testId}
        onClick={onClick}
        href={href}
        as={Component}
      >
        {(title || icon || badge) && (
          <div className="d-flex justify-content-between align-items-center">
            {title && title}
            {icon && icon}
            {badge && badge}
          </div>
        )}
        {subText && subText}
      </ListGroupItem>
    );
  }
);

CloudBeesNavigationItem.displayName = "Cloudbees Navigation Item";

export default CloudBeesNavigationItem;