"use strict";

import { Image, StyleSheet, View } from "react-native";
import { useIOTheme } from "../../context";
import { IOListItemVisualParams, IOSelectionListItemVisualParams, IOVisualCostants } from "../../core";
import { useIOFontDynamicScale } from "../../utils/accessibility";
import { Badge } from "../badge";
import { Icon } from "../icons";
import { HStack, VStack } from "../layout";
import { IOSkeleton } from "../skeleton";
import { BodySmall, LabelMini } from "../typography";
import { ModuleStatic } from "./ModuleStatic";
import { PressableModuleBase } from "./PressableModuleBase";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ModuleNavigation = props => {
  const theme = useIOTheme();
  const {
    hugeFontEnabled
  } = useIOFontDynamicScale();
  if (props.isLoading) {
    return /*#__PURE__*/_jsx(ModuleNavigationSkeleton, {
      loadingAccessibilityLabel: props.loadingAccessibilityLabel
    });
  }
  const {
    icon,
    image,
    title,
    subtitle,
    onPress,
    badge,
    ...pressableProps
  } = props;
  const iconComponent = icon && !hugeFontEnabled && /*#__PURE__*/_jsx(Icon, {
    name: icon,
    size: IOSelectionListItemVisualParams.iconSize,
    color: "grey-300"
  });
  const imageComponent = image && /*#__PURE__*/_jsx(Image, {
    source: image,
    style: styles.image,
    accessibilityIgnoresInvertColors: true
  });
  return /*#__PURE__*/_jsx(PressableModuleBase, {
    ...pressableProps,
    onPress: onPress,
    children: /*#__PURE__*/_jsxs(HStack, {
      space: 8,
      style: {
        alignItems: "center"
      },
      children: [/*#__PURE__*/_jsxs(HStack, {
        space: IOVisualCostants.iconMargin,
        style: {
          alignItems: "center",
          flexGrow: 1,
          flexShrink: 1
        },
        children: [iconComponent ?? imageComponent, /*#__PURE__*/_jsxs(View, {
          style: {
            flexShrink: 1
          },
          children: [/*#__PURE__*/_jsx(BodySmall, {
            color: theme["interactiveElem-default"],
            weight: "Semibold",
            numberOfLines: 2,
            lineBreakMode: "middle",
            style: {
              flexShrink: 1
            },
            children: title
          }), subtitle && /*#__PURE__*/_jsx(LabelMini, {
            weight: "Regular",
            color: theme["textBody-tertiary"],
            children: subtitle
          })]
        })]
      }), badge ? /*#__PURE__*/_jsx(Badge, {
        ...badge
      }) : onPress ? /*#__PURE__*/_jsx(Icon, {
        name: "chevronRightListItem",
        color: theme["interactiveElem-default"],
        size: IOListItemVisualParams.chevronSize
      }) : null]
    })
  });
};
const ModuleNavigationSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/_jsx(ModuleStatic, {
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  startBlock: /*#__PURE__*/_jsxs(HStack, {
    style: {
      alignItems: "center"
    },
    space: IOVisualCostants.iconMargin,
    children: [/*#__PURE__*/_jsx(IOSkeleton, {
      shape: "square",
      size: 24,
      radius: 8
    }), /*#__PURE__*/_jsxs(VStack, {
      space: 4,
      children: [/*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 96,
        height: 16,
        radius: 8
      }), /*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 160,
        height: 12,
        radius: 8
      })]
    })]
  }),
  endBlock: /*#__PURE__*/_jsx(IOSkeleton, {
    shape: "rectangle",
    width: 64,
    height: 24,
    radius: 16
  })
});
const styles = StyleSheet.create({
  image: {
    width: IOSelectionListItemVisualParams.iconSize,
    height: IOSelectionListItemVisualParams.iconSize,
    resizeMode: "contain"
  }
});
//# sourceMappingURL=ModuleNavigation.js.map