"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModuleCredential = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _context = require("../../context");
var _core = require("../../core");
var _accessibility = require("../../utils/accessibility");
var _badge = require("../badge");
var _icons = require("../icons");
var _layout = require("../layout");
var _Stack = require("../layout/Stack");
var _loadingSpinner = require("../loadingSpinner");
var _skeleton = require("../skeleton");
var _typography = require("../typography");
var _ModuleStatic = require("./ModuleStatic");
var _PressableModuleBase = require("./PressableModuleBase");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ModuleCredential = props => props.isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ModuleCredentialSkeleton, {
  loadingAccessibilityLabel: props.loadingAccessibilityLabel
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ModuleCredentialContent, {
  ...props
});
exports.ModuleCredential = ModuleCredential;
const ModuleCredentialContent = ({
  testID,
  icon,
  image,
  label,
  onPress,
  badge,
  isFetching,
  ...pressableProps
}) => {
  const theme = (0, _context.useIOTheme)();
  const {
    hugeFontEnabled
  } = (0, _accessibility.useIOFontDynamicScale)();
  const iconComponent = icon && !hugeFontEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
    allowFontScaling: true,
    name: icon,
    size: _core.IOSelectionListItemVisualParams.iconSize,
    color: theme["icon-decorative"]
  });
  const imageComponent = image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
    source: image,
    style: styles.image,
    accessibilityIgnoresInvertColors: true
  });
  const endComponent = (0, _react.useMemo)(() => {
    const activityIndicatorTestID = testID ? `${testID}_activityIndicator` : undefined;
    const chevronTestID = testID ? `${testID}_icon` : undefined;
    const badgeTestID = testID ? `${testID}_badge` : undefined;
    return badge || onPress ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.HStack, {
      style: {
        alignItems: "center"
      },
      children: [badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
        ...badge,
        testID: badgeTestID
      }), onPress && (isFetching ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.HSpacer, {
          size: 8
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingSpinner.LoadingSpinner, {
          testID: activityIndicatorTestID
        })]
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        testID: chevronTestID,
        name: "chevronRightListItem",
        color: theme["interactiveElem-default"],
        size: _core.IOListItemVisualParams.chevronSize
      }))]
    }) : null;
  }, [testID, theme, isFetching, badge, onPress]);
  const ModuleContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.HStack, {
    space: 8,
    style: {
      alignItems: "center"
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.HStack, {
      space: _core.IOVisualCostants.iconMargin,
      style: {
        flexGrow: 1,
        flexShrink: 1,
        alignItems: "center"
      },
      children: [iconComponent ?? imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.BodySmall, {
        color: theme["interactiveElem-default"],
        weight: "Semibold",
        numberOfLines: 2,
        lineBreakMode: "middle",
        style: {
          flexShrink: 1
        },
        children: label
      })]
    }), endComponent]
  });
  return onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableModuleBase.PressableModuleBase, {
    ...pressableProps,
    testID: testID,
    onPress: onPress,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModuleContent, {})
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModuleStatic.ModuleStatic, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModuleContent, {})
  });
};
const ModuleCredentialSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModuleStatic.ModuleStatic, {
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  startBlock: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.HStack, {
    style: {
      alignItems: "center"
    },
    space: _core.IOVisualCostants.iconMargin,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
      shape: "square",
      size: 24,
      radius: 8
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
      shape: "rectangle",
      width: 96,
      height: 16,
      radius: 8
    })]
  }),
  endBlock: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
    shape: "rectangle",
    width: 64,
    height: 24,
    radius: 16
  })
});
const styles = _reactNative.StyleSheet.create({
  image: {
    width: _core.IOSelectionListItemVisualParams.iconSize,
    height: _core.IOSelectionListItemVisualParams.iconSize,
    resizeMode: "contain"
  }
});
//# sourceMappingURL=ModuleCredential.js.map