"use strict";

import { useMemo } from "react";
import { Image, StyleSheet } 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 { HSpacer } from "../layout";
import { HStack } from "../layout/Stack";
import { LoadingSpinner } from "../loadingSpinner";
import { IOSkeleton } from "../skeleton";
import { BodySmall } from "../typography";
import { ModuleStatic } from "./ModuleStatic";
import { PressableModuleBase } from "./PressableModuleBase";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const ModuleCredential = props => props.isLoading ? /*#__PURE__*/_jsx(ModuleCredentialSkeleton, {
  loadingAccessibilityLabel: props.loadingAccessibilityLabel
}) : /*#__PURE__*/_jsx(ModuleCredentialContent, {
  ...props
});
const ModuleContent = ({
  icon,
  image,
  label,
  endComponent
}) => {
  const theme = useIOTheme();
  const {
    hugeFontEnabled
  } = useIOFontDynamicScale();
  return /*#__PURE__*/_jsxs(HStack, {
    space: 8,
    style: {
      alignItems: "center"
    },
    children: [/*#__PURE__*/_jsxs(HStack, {
      space: IOVisualCostants.iconMargin,
      style: {
        flexGrow: 1,
        flexShrink: 1,
        alignItems: "center"
      },
      children: [icon && !hugeFontEnabled ? /*#__PURE__*/_jsx(Icon, {
        allowFontScaling: true,
        name: icon,
        size: IOSelectionListItemVisualParams.iconSize,
        color: theme["icon-decorative"]
      }) : image && /*#__PURE__*/_jsx(Image, {
        source: image,
        style: styles.image,
        accessibilityIgnoresInvertColors: true
      }), /*#__PURE__*/_jsx(BodySmall, {
        color: theme["interactiveElem-default"],
        weight: "Semibold",
        numberOfLines: 2,
        lineBreakMode: "middle",
        style: {
          flexShrink: 1
        },
        children: label
      })]
    }), endComponent]
  });
};
const ModuleCredentialContent = ({
  testID,
  icon,
  image,
  label,
  onPress,
  badge,
  isFetching,
  ...pressableProps
}) => {
  const theme = useIOTheme();
  const endComponent = useMemo(() => {
    const activityIndicatorTestID = testID ? `${testID}_activityIndicator` : undefined;
    const chevronTestID = testID ? `${testID}_icon` : undefined;
    const badgeTestID = testID ? `${testID}_badge` : undefined;
    return badge || onPress ? /*#__PURE__*/_jsxs(HStack, {
      style: {
        alignItems: "center"
      },
      children: [badge && /*#__PURE__*/_jsx(Badge, {
        ...badge,
        testID: badgeTestID
      }), onPress && (isFetching ? /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(HSpacer, {
          size: 8
        }), /*#__PURE__*/_jsx(LoadingSpinner, {
          testID: activityIndicatorTestID
        })]
      }) : /*#__PURE__*/_jsx(Icon, {
        testID: chevronTestID,
        name: "chevronRightListItem",
        color: theme["interactiveElem-default"],
        size: IOListItemVisualParams.chevronSize
      }))]
    }) : null;
  }, [testID, theme, isFetching, badge, onPress]);
  return onPress ? /*#__PURE__*/_jsx(PressableModuleBase, {
    ...pressableProps,
    testID: testID,
    onPress: onPress,
    children: /*#__PURE__*/_jsx(ModuleContent, {
      icon: icon,
      image: image,
      label: label,
      endComponent: endComponent
    })
  }) : /*#__PURE__*/_jsx(ModuleStatic, {
    children: /*#__PURE__*/_jsx(ModuleContent, {
      icon: icon,
      image: image,
      label: label,
      endComponent: endComponent
    })
  });
};
const ModuleCredentialSkeleton = ({
  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__*/_jsx(IOSkeleton, {
      shape: "rectangle",
      width: 96,
      height: 16,
      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"
  }
});
export { ModuleCredential };
//# sourceMappingURL=ModuleCredential.js.map