var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from "react";
import { border } from "styled-system";
import Text from "../asorted/Text";
import baseStyled from "../styled";
function getColor({ type, active, disabled }) {
    switch (type) {
        case "plain":
            if (disabled)
                return active ? "neutral.c00" : "neutral.c70";
            return active ? "neutral.c00" : "primary.c90";
        default:
            return disabled ? "neutral.c70" : "primary.c90";
    }
}
function getBgColor({ type, active, disabled }) {
    switch (type) {
        case "plain":
            return active ? (disabled ? "neutral.c70" : "primary.c90") : undefined;
        case "opacity":
            return active ? (disabled ? "neutral.c30" : "primary.c20") : undefined;
        default:
            return;
    }
}
function getBorderColor({ type, active, disabled }) {
    if (!active)
        return;
    switch (type) {
        case "outlined":
            return disabled ? "neutral.c70" : "primary.c90";
        case "outlinedOpacity":
            return disabled ? "neutral.c40" : "primary.c40";
    }
}
function getPadding({ size }) {
    // Padding is 1px less than what's indicated in the design because of the 1px wide border.
    switch (size) {
        case "tiny":
            return "1px 3px";
        case "small":
            return "2px 4px";
        case "medium":
            return "5px 7px";
        case "large":
        default:
            return "8px 9px 9px";
    }
}
function getTextProps({ size }) {
    switch (size) {
        case "tiny":
        case "small":
        case "medium":
            return {
                variant: "tiny",
                fontWeight: "semiBold",
                lineHeight: "normal",
            };
        case "large":
        default:
            return {
                variant: "extraSmall",
                fontWeight: "semiBold",
            };
    }
}
const TagContainer = baseStyled.div.attrs(props => ({
    backgroundColor: props.bg || props.backgroundColor || getBgColor(props),
    color: props.color || getColor(props),
    borderColor: getBorderColor(props),
})) `
  display: inline-flex;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: ${p => `${p.theme.radii[1]}px`};
  padding: ${p => getPadding(p)};
  ${border}
`;
export default function Tag(_a) {
    var { children, textProps, size = "large" } = _a, props = __rest(_a, ["children", "textProps", "size"]);
    const textColor = getColor(props);
    const baseTextProps = getTextProps(Object.assign({ size }, props));
    return (React.createElement(TagContainer, Object.assign({ size: size }, props),
        React.createElement(Text, Object.assign({}, baseTextProps, { color: textColor }, (textProps ? textProps : {})), children)));
}
//# sourceMappingURL=index.js.map