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

const cn = "Tag";

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

export enum TAG_ICON_POSITION {
  LEFT = "left",
  RIGHT = "right",
}

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?: IconType;
  /**
   * To which side of the tag content the provided icon will be shown
   */
  iconPosition?: TAG_ICON_POSITION;
}

export const Tag = ({
  variant = TAG_VARIANT.SECONDARY,
  clickable = false,
  filled = false,
  toggleable = false,
  icon,
  iconPosition = TAG_ICON_POSITION.LEFT,
  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,
      )}
      type={Component === "button" ? "button" : undefined}
      {...rest}
    >
      {icon && iconPosition === TAG_ICON_POSITION.LEFT && (
        <Icon
          className={classNames(
            bem(cn, { e: "icon" }),
            icon && !children && bem(cn, { e: "icon", m: "iconOnly" }),
          )}
          icon={icon}
        />
      )}
      {children}
      {icon && iconPosition === TAG_ICON_POSITION.RIGHT && (
        <Icon
          className={classNames(
            bem(cn, { e: "icon" }),
            icon && !children && bem(cn, { e: "icon", m: "iconOnly" }),
          )}
          icon={icon}
        />
      )}
    </Component>
  );
};

Tag.Group = TagGroup;