import React, { forwardRef } from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bem } from "../../utilities/bem";
import { isSafeUrl } from "../../utilities/strings";
import { ICON_STYLE_PREFIX, Icon, IconType } from "../Icon";
import { STATUS_VARIANT } from "../../types";
import { Badge, BADGE_SIZE } from "../Badge";

const cn = "Reference";

export interface ReferenceProps {
  as?: any;
  disabled?: boolean;
  icon?: IconType;
  iconPrefix?: ICON_STYLE_PREFIX;
  badgeVariant?: STATUS_VARIANT;
  badgeLabel?: string;
  /**
   * Used to disable interactive (i.e. hover) styles when the `Reference`
   * is not a link or button
   */
  noLink?: boolean;
  reverse?: boolean;
  [key: string]: any;
}

const ReferenceGroup = ({ className, ...rest }: BoxProps) => (
  <Box className={classNames(bem(`${cn}Group`), className)} {...rest} />
);

const Reference = forwardRef<HTMLElement, ReferenceProps>(
  (
    {
      as: Component = "a",
      disabled,
      className,
      icon,
      iconPrefix,
      badgeVariant,
      badgeLabel,
      children,
      target,
      noLink,
      reverse = false,
      href,
      ...rest
    },
    ref,
  ) => {
    const safeHref = isSafeUrl(href) ? href : "#";
    return (
      <Component
        className={classNames(
          bem(cn),
          !noLink && bem(cn, { m: "isLink" }),
          disabled && bem(cn, { m: "disabled" }),
          reverse && "flex-row-reverse",
          className,
        )}
        disabled={Component === "button" && disabled}
        target={target}
        rel={`${target === "_blank" ? "noopener noreferrer" : ""}`}
        ref={ref}
        href={safeHref}
        {...rest}
      >
        {icon && (
          <Icon
            className={classNames(bem(cn, { e: "icon" }))}
            icon={icon}
            prefix={iconPrefix}
          />
        )}
        {children}
        {badgeLabel && (
          <Badge
            className={classNames(bem(cn, { e: "badge" }))}
            variant={badgeVariant}
            size={BADGE_SIZE.MICRO}
          >
            {badgeLabel}
          </Badge>
        )}
      </Component>
    );
  },
);

const CompoundReference = Object.assign(Reference, {
  Group: ReferenceGroup,
});

export { CompoundReference as Reference };