import React from "react";
import classNames from "classnames";
import { BoxProps } from "../Box";
import { bem } from "../../utilities/bem";
import { ICON_TYPE, Icon } from "../Icon";
import { TagGroup } from "./TagGroup";

const cn = "Tag";

export enum TAG_VARIANT {
  PRIMARY = "primary",
  SECONDARY = "secondary",
}

export interface TagProps extends BoxProps {
  /**
   * Sets the style of the tag
   */
  variant?: TAG_VARIANT;
  /**
   * Inverses the variant colors
   */
  filled?: boolean;
  /**
   * Enables hover and focused styles if the tag is rendered as a clickable element
   */
  clickable?: boolean;
  /**
   * Applies the correct styles if a tag is used to show an "on/off" or "selected/deselected" state
   */
  toggleable?: boolean;
  /**
   * Icon to show next to the tag content
   */
  icon?: ICON_TYPE;
}

export const Tag = ({
  variant = TAG_VARIANT.SECONDARY,
  clickable = false,
  filled = false,
  toggleable = false,
  icon,
  as: Component = "span",
  className,
  children,
  ...rest
}: TagProps) => {
  return (
    <Component
      className={classNames(
        bem(cn),
        !toggleable && bem(cn, { m: variant }),
        icon && !children && bem(cn, { m: "iconOnly" }),
        filled && bem(cn, { m: "filled" }),
        toggleable && bem(cn, { m: "toggleable" }),
        (clickable || toggleable) && bem(cn, { m: "clickable" }),
        className,
      )}
      {...rest}
    >
      {icon && (
        <Icon
          className={classNames(
            bem(cn, { e: "icon" }),
            icon && !children && bem(cn, { e: "icon", m: "iconOnly" }),
          )}
          icon={icon}
        />
      )}
      {children}
    </Component>
  );
};

Tag.Group = TagGroup;