"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AvatarSearch = exports.Avatar = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _icons = require("../../components/icons");
var _context = require("../../context");
var _core = require("../../core");
var _image = require("../../utils/image");
var _avatarPlaceholder = _interopRequireDefault(require("./placeholder/avatar-placeholder.png"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const internalSpaceDefaultSize = 6;
const internalSpaceLargeSize = 9;
const internalSpacePlaceholderDefaultSize = 12;
const internalSpacePlaceholderLargeSize = 16;
const avatarBorderLightMode = (0, _core.hexToRgba)(_core.IOColors.black, 0.1);
const dimensionsMap = {
  small: {
    size: _core.IOVisualCostants.avatarSizeSmall,
    internalSpace: internalSpaceDefaultSize,
    internalSpacePlaceholder: internalSpacePlaceholderDefaultSize,
    radius: _core.IOVisualCostants.avatarRadiusSizeSmall
  },
  medium: {
    size: _core.IOVisualCostants.avatarSizeMedium,
    internalSpace: internalSpaceLargeSize,
    internalSpacePlaceholder: internalSpacePlaceholderLargeSize,
    radius: _core.IOVisualCostants.avatarRadiusSizeMedium
  }
};
const styles = _reactNative.StyleSheet.create({
  avatarWrapper: {
    overflow: "hidden",
    borderColor: avatarBorderLightMode,
    borderWidth: 1,
    borderCurve: "continuous"
  },
  avatarInnerWrapper: {
    overflow: "hidden",
    backgroundColor: _core.IOColors.white,
    borderCurve: "continuous"
  },
  avatarImage: {
    resizeMode: "contain",
    height: "100%",
    width: "100%"
  }
});

/**
 * Avatar component is used to display the logo of an organization. It accepts the following props:
 * - `logoUri`: the uri of the image to display. If not provided, a placeholder icon will be displayed. It can be a single uri or an array of uris, in which case the first one that is available will be used.
 * - `shape`: the shape of the avatar, can be "circle" or "square"
 * - `size`: the size of the avatar, can be "small" or "medium"
 * @param AvatarProps
 * @returns
 */
const Avatar = ({
  logoUri,
  size
}) => {
  const theme = (0, _context.useIOTheme)();
  const indexValue = (0, _react.useRef)(0);
  const [imageSource, setImageSource] = (0, _react.useState)(logoUri === undefined ? undefined : (0, _image.addCacheTimestampToUri)(logoUri));
  const onError = () => {
    if (Array.isArray(logoUri) && indexValue.current + 1 < logoUri.length) {
      // eslint-disable-next-line functional/immutable-data
      indexValue.current = indexValue.current + 1;
      setImageSource((0, _image.addCacheTimestampToUri)(logoUri[indexValue.current]));
      return;
    }
    setImageSource(undefined);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    accessibilityIgnoresInvertColors: true,
    style: [styles.avatarWrapper, {
      height: dimensionsMap[size].size,
      width: dimensionsMap[size].size,
      borderRadius: dimensionsMap[size].radius,
      backgroundColor: imageSource === undefined ? _core.IOColors["grey-50"] : _core.IOColors.white,
      padding: imageSource === undefined ? dimensionsMap[size].internalSpacePlaceholder : dimensionsMap[size].internalSpace
    }],
    children: imageSource === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      name: "institution",
      color: theme["icon-decorative"],
      size: "100%"
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.avatarInnerWrapper, {
        borderRadius: dimensionsMap[size].radius - dimensionsMap[size].internalSpace
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        accessibilityIgnoresInvertColors: true,
        source: imageSource,
        style: styles.avatarImage,
        onError: onError
      })
    })
  });
};
exports.Avatar = Avatar;
/**
 * AvatarSearch component is used to display the logo of an institution in the search results.
 * A placeholder is displayed if the logo is not available.
 * Note: On Android, the default source prop is ignored on debug builds.
 *
 * @param AvatarSearchProps
 * @returns
 */
const AvatarSearch = exports.AvatarSearch = /*#__PURE__*/(0, _react.memo)(({
  defaultSource,
  source,
  onError
}) => {
  // Visual attributes
  const avatarSize = dimensionsMap.small.size;
  const borderRadius = dimensionsMap.small.radius;
  const internalSpace = dimensionsMap.small.internalSpace;
  const innerRadius = borderRadius - internalSpace;
  const defaultPlaceholder = defaultSource ?? _avatarPlaceholder.default;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    accessibilityIgnoresInvertColors: true,
    style: [styles.avatarWrapper, {
      borderRadius,
      height: avatarSize,
      width: avatarSize,
      backgroundColor: _core.IOColors.white,
      padding: internalSpace
    }],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.avatarInnerWrapper, {
        borderRadius: innerRadius
      }],
      children: source === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        accessibilityIgnoresInvertColors: true,
        source: defaultPlaceholder,
        style: styles.avatarImage
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        accessibilityIgnoresInvertColors: true,
        source: source,
        onError: onError,
        style: styles.avatarImage
      })
    })
  });
});
//# sourceMappingURL=Avatar.js.map