"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModuleNavigationAlt = void 0;
var _react = 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 _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");
const ModuleNavigationAlt = props => {
  const theme = (0, _context.useIOTheme)();
  const {
    hugeFontEnabled
  } = (0, _accessibility.useIOFontDynamicScale)();
  const graphicWrapperSize = 48;
  if (props.isLoading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ModuleNavigationAltSkeleton, {
      loadingAccessibilityLabel: props.loadingAccessibilityLabel
    });
  }
  const {
    testID,
    icon,
    iconColor = theme["interactiveElem-default"],
    image,
    title,
    subtitle,
    onPress,
    badge,
    isFetching,
    rightIcon,
    ...pressableProps
  } = props;
  const iconComponent = icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
    name: icon,
    size: 32,
    color: iconColor
  });
  const imageComponent = () => {
    if (!image) {
      return null;
    }
    if (/*#__PURE__*/(0, _react.isValidElement)(image)) {
      return image;
    } else {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
          source: image,
          style: styles.image,
          accessibilityIgnoresInvertColors: true
        })
      });
    }
  };
  const endComponent = () => {
    if (isFetching) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingSpinner.LoadingSpinner, {
        testID: testID ? `${testID}_activityIndicator` : undefined
      });
    }
    if (onPress) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        testID: testID ? `${testID}_icon` : undefined,
        name: rightIcon ?? "chevronRightListItem",
        color: theme["interactiveElem-default"],
        size: _core.IOListItemVisualParams.chevronSize
      });
    }
    return null;
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableModuleBase.PressableModuleBase, {
    ...pressableProps,
    testID: testID,
    onPress: onPress,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
      space: 8,
      style: {
        alignItems: "center"
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
        space: _core.IOVisualCostants.iconMargin,
        style: {
          alignItems: "center",
          flexGrow: 1,
          flexShrink: 1
        },
        children: [!hugeFontEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: {
            alignItems: "center",
            justifyContent: "center",
            width: graphicWrapperSize,
            height: graphicWrapperSize
          },
          children: iconComponent ?? imageComponent()
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.VStack, {
          space: 8,
          style: {
            flexShrink: 1,
            alignItems: "flex-start"
          },
          children: [badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
            ...badge
          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.BodySmall, {
              color: theme["interactiveElem-default"],
              weight: "Semibold",
              numberOfLines: 2,
              lineBreakMode: "middle",
              style: {
                flexShrink: 1
              },
              children: title
            }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.LabelMini, {
              weight: "Regular",
              color: theme["textBody-tertiary"],
              children: subtitle
            })]
          })]
        })]
      }), endComponent()]
    })
  });
};
exports.ModuleNavigationAlt = ModuleNavigationAlt;
const ModuleNavigationAltSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModuleStatic.ModuleStatic, {
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  startBlock: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
    style: {
      alignItems: "center"
    },
    space: _core.IOVisualCostants.iconMargin,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
      shape: "square",
      size: 32,
      radius: 8
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.VStack, {
      space: 4,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "rectangle",
        width: 52,
        height: 12,
        radius: 8
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "rectangle",
        width: 96,
        height: 16,
        radius: 8
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "rectangle",
        width: 160,
        height: 12,
        radius: 8
      })]
    })]
  }),
  endBlock: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
    shape: "rectangle",
    width: 64,
    height: 24,
    radius: 16
  })
});
const styles = _reactNative.StyleSheet.create({
  image: {
    width: "100%",
    height: "auto",
    resizeMode: "contain"
  }
});
//# sourceMappingURL=ModuleNavigationAlt.js.map