"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tag = void 0;
var _reactNative = require("react-native");
var _context = require("../../context");
var _core = require("../../core");
var _accessibility = require("../../utils/accessibility");
var _icons = require("../icons");
var _typography = require("../typography");
var _jsxRuntime = require("react/jsx-runtime");
const IconColorsMap = {
  primary: "interactiveElem-default",
  warning: "warningIcon",
  error: "errorIcon",
  success: "successIcon",
  info: "infoIcon",
  grey: "icon-default",
  lightGrey: "icon-decorative"
};
const IOTagIconMargin = 6;
const IOTagIconSize = 16;
const styles = _reactNative.StyleSheet.create({
  tag: {
    alignSelf: "flex-start",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    ..._reactNative.Platform.select({
      android: {
        textAlignVertical: "center"
      }
    }),
    overflow: "hidden",
    borderWidth: 1,
    borderCurve: "continuous"
  },
  tagStatic: {
    borderRadius: _core.IOTagRadius,
    borderCurve: "continuous",
    paddingHorizontal: _core.IOTagHSpacing,
    paddingVertical: _core.IOTagVSpacing,
    columnGap: IOTagIconMargin
  },
  iconWrapper: {
    flexShrink: 0
  }
});
const getVariantProps = (variant, customIcon) => {
  if (variant === "custom" && customIcon) {
    return customIcon;
  }
  switch (variant) {
    case "qrCode":
      return {
        color: "primary",
        name: "qrCode"
      };
    case "attachment":
      return {
        color: "grey",
        name: "attachment"
      };
    case "legalMessage":
      return {
        color: "primary",
        name: "legalValue"
      };
    case "info":
      return {
        color: "info",
        name: "infoFilled"
      };
    case "warning":
      return {
        color: "warning",
        name: "warningFilled"
      };
    case "error":
      return {
        color: "error",
        name: "errorFilled"
      };
    case "success":
      return {
        color: "success",
        name: "success"
      };
    case "noIcon":
      return undefined;
    default:
      return undefined;
  }
};

/**
 * Tag component, used mainly for message list and details
 */
const Tag = ({
  text,
  variant,
  testID,
  icon,
  iconAccessibilityLabel,
  allowFontScaling = true,
  forceLightMode = false
}) => {
  const theme = (0, _context.useIOTheme)();
  const {
    dynamicFontScale,
    spacingScaleMultiplier
  } = (0, _accessibility.useIOFontDynamicScale)();
  const variantProps = getVariantProps(variant, icon);
  const borderColor = forceLightMode ? _core.IOColors[_core.IOThemeLight["cardBorder-default"]] : _core.IOColors[theme["cardBorder-default"]];
  const backgroundColor = forceLightMode ? _core.IOColors[_core.IOThemeLight["appBackground-primary"]] : _core.IOColors[theme["appBackground-primary"]];
  const tagDynamic = {
    paddingHorizontal: _core.IOTagHSpacing * dynamicFontScale,
    paddingVertical: _core.IOTagVSpacing * dynamicFontScale,
    columnGap: IOTagIconMargin * dynamicFontScale * spacingScaleMultiplier,
    borderRadius: _core.IOTagRadius * dynamicFontScale
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    testID: testID,
    style: [styles.tag, allowFontScaling ? tagDynamic : styles.tagStatic, {
      borderColor,
      backgroundColor
    }],
    children: [variantProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.iconWrapper,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        allowFontScaling: allowFontScaling,
        name: variantProps.name,
        color: forceLightMode ? _core.IOThemeLight[IconColorsMap[variantProps.color]] : theme[IconColorsMap[variantProps.color]],
        size: IOTagIconSize,
        accessible: !!iconAccessibilityLabel,
        accessibilityLabel: iconAccessibilityLabel
      })
    }), text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.IOText, {
      allowFontScaling: allowFontScaling,
      weight: "Semibold",
      size: 12,
      lineHeight: 16,
      color: forceLightMode ? _core.IOThemeLight["textBody-tertiary"] : theme["textBody-tertiary"],
      numberOfLines: 1,
      ellipsizeMode: "tail",
      style: {
        alignSelf: "center",
        textTransform: "uppercase",
        letterSpacing: 0.5,
        flexShrink: 1
      },
      children: text
    })]
  });
};
exports.Tag = Tag;
//# sourceMappingURL=Tag.js.map