"use strict";

import { memo, useRef, useState } from "react";
import { Image, StyleSheet, View } from "react-native";
import { Icon } from "../../components/icons";
import { useIOTheme } from "../../context";
import { IOColors, IOVisualCostants, hexToRgba } from "../../core";
import { addCacheTimestampToUri } from "../../utils/image";
import avatarSearchPlaceholder from "./placeholder/avatar-placeholder.png";
import { jsx as _jsx } from "react/jsx-runtime";
const internalSpaceDefaultSize = 6;
const internalSpaceLargeSize = 9;
const internalSpacePlaceholderDefaultSize = 12;
const internalSpacePlaceholderLargeSize = 16;
const avatarBorderLightMode = hexToRgba(IOColors.black, 0.1);
const dimensionsMap = {
  small: {
    size: IOVisualCostants.avatarSizeSmall,
    internalSpace: internalSpaceDefaultSize,
    internalSpacePlaceholder: internalSpacePlaceholderDefaultSize,
    radius: IOVisualCostants.avatarRadiusSizeSmall
  },
  medium: {
    size: IOVisualCostants.avatarSizeMedium,
    internalSpace: internalSpaceLargeSize,
    internalSpacePlaceholder: internalSpacePlaceholderLargeSize,
    radius: IOVisualCostants.avatarRadiusSizeMedium
  }
};
const styles = StyleSheet.create({
  avatarWrapper: {
    overflow: "hidden",
    borderColor: avatarBorderLightMode,
    borderWidth: 1,
    borderCurve: "continuous"
  },
  avatarInnerWrapper: {
    overflow: "hidden",
    backgroundColor: 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
 */
export const Avatar = ({
  logoUri,
  size
}) => {
  const theme = useIOTheme();
  const indexValue = useRef(0);
  const [imageSource, setImageSource] = useState(logoUri === undefined ? undefined : 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(addCacheTimestampToUri(logoUri[indexValue.current]));
      return;
    }
    setImageSource(undefined);
  };
  return /*#__PURE__*/_jsx(View, {
    accessibilityIgnoresInvertColors: true,
    style: [styles.avatarWrapper, {
      height: dimensionsMap[size].size,
      width: dimensionsMap[size].size,
      borderRadius: dimensionsMap[size].radius,
      backgroundColor: imageSource === undefined ? IOColors["grey-50"] : IOColors.white,
      padding: imageSource === undefined ? dimensionsMap[size].internalSpacePlaceholder : dimensionsMap[size].internalSpace
    }],
    children: imageSource === undefined ? /*#__PURE__*/_jsx(Icon, {
      name: "institution",
      color: theme["icon-decorative"],
      size: "100%"
    }) : /*#__PURE__*/_jsx(View, {
      style: [styles.avatarInnerWrapper, {
        borderRadius: dimensionsMap[size].radius - dimensionsMap[size].internalSpace
      }],
      children: /*#__PURE__*/_jsx(Image, {
        accessibilityIgnoresInvertColors: true,
        source: imageSource,
        style: styles.avatarImage,
        onError: onError
      })
    })
  });
};
/**
 * 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
 */
export const AvatarSearch = /*#__PURE__*/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 ?? avatarSearchPlaceholder;
  return /*#__PURE__*/_jsx(View, {
    accessibilityIgnoresInvertColors: true,
    style: [styles.avatarWrapper, {
      borderRadius,
      height: avatarSize,
      width: avatarSize,
      backgroundColor: IOColors.white,
      padding: internalSpace
    }],
    children: /*#__PURE__*/_jsx(View, {
      style: [styles.avatarInnerWrapper, {
        borderRadius: innerRadius
      }],
      children: source === undefined ? /*#__PURE__*/_jsx(Image, {
        accessibilityIgnoresInvertColors: true,
        source: defaultPlaceholder,
        style: styles.avatarImage
      }) : /*#__PURE__*/_jsx(Image, {
        accessibilityIgnoresInvertColors: true,
        source: source,
        onError: onError,
        style: styles.avatarImage
      })
    })
  });
});
//# sourceMappingURL=Avatar.js.map