"use strict";

import { useCallback } from "react";
import { useIOTheme } from "../../context";
import { IOListItemVisualParams } from "../../core";
import { Badge } from "../badge";
import { Icon } from "../icons";
import { HStack, VStack } from "../layout";
import { LoadingSpinner } from "../loadingSpinner";
import { IOSkeleton } from "../skeleton";
import { Body } from "../typography";
import { ModuleStatic } from "./ModuleStatic";
import { PressableModuleBase } from "./PressableModuleBase";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ModuleAttachmentContent = ({
  isFetching,
  format,
  title,
  testID
}) => {
  const theme = useIOTheme();
  return /*#__PURE__*/_jsxs(HStack, {
    space: 8,
    style: {
      alignItems: "center"
    },
    children: [/*#__PURE__*/_jsxs(VStack, {
      space: 4,
      style: {
        alignItems: "flex-start",
        flexShrink: 1,
        flexGrow: 1
      },
      children: [/*#__PURE__*/_jsx(Body, {
        weight: "Semibold",
        numberOfLines: 2,
        color: theme["interactiveElem-default"],
        children: title
      }), /*#__PURE__*/_jsx(Badge, {
        text: format.toUpperCase(),
        variant: "default"
      })]
    }), isFetching ? /*#__PURE__*/_jsx(LoadingSpinner, {
      testID: testID ? `${testID}_activityIndicator` : undefined
    }) : /*#__PURE__*/_jsx(Icon, {
      name: "chevronRightListItem",
      color: theme["interactiveElem-default"],
      size: IOListItemVisualParams.chevronSize
    })]
  });
};

/**
 * The `ModuleAttachment` component is a custom button component with an extended outline style.
 * It provides an animated scaling effect when pressed.
 *
 * @param {string}   accessibilityLabel - Optional accessibility label.
 * @param {boolean}  disabled - If true, the button is disabled.
 * @param {string}   fetchingAccessibilityLabel - Optional accessibility label to use during fetching.
 * @param {string}   loadingAccessibilityLabel - Optional accessibility label to use during loading.
 * @param {string}   format - Badge content. PDF or DOC.
 * @param {boolean}  isLoading - If true, displays a skeleton loading component.
 * @param {boolean}  isFetching - If true, displays an activity indicator.
 * @param {function} onPress - The function to be executed when the item is pressed.
 * @param {string}   testID - The test ID for testing purposes.
 * @param {string}   title - The title text to display.
 *
 */
export const ModuleAttachment = ({
  accessibilityLabel,
  disabled = false,
  fetchingAccessibilityLabel,
  loadingAccessibilityLabel,
  format,
  isLoading = false,
  isFetching = false,
  onPress,
  testID,
  title
}) => {
  const handleOnPress = useCallback(event => {
    if (isFetching) {
      return;
    }
    onPress(event);
  }, [isFetching, onPress]);
  if (isLoading) {
    return /*#__PURE__*/_jsx(ModuleAttachmentSkeleton, {
      loadingAccessibilityLabel: loadingAccessibilityLabel
    });
  }
  const pressableAccessibilityLabel = (isFetching && !!fetchingAccessibilityLabel ? fetchingAccessibilityLabel : accessibilityLabel) ?? title;
  return disabled || isFetching ? /*#__PURE__*/_jsx(ModuleStatic, {
    disabled: disabled,
    children: /*#__PURE__*/_jsx(ModuleAttachmentContent, {
      isFetching: isFetching,
      title: title,
      format: format
    })
  }) : /*#__PURE__*/_jsx(PressableModuleBase, {
    testID: testID,
    onPress: handleOnPress,
    accessibilityHint: format,
    accessibilityLabel: pressableAccessibilityLabel,
    children: /*#__PURE__*/_jsx(ModuleAttachmentContent, {
      isFetching: isFetching,
      title: title,
      format: format
    })
  });
};
const ModuleAttachmentSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/_jsx(ModuleStatic, {
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  startBlock: /*#__PURE__*/_jsxs(VStack, {
    space: 4,
    children: [/*#__PURE__*/_jsx(IOSkeleton, {
      shape: "rectangle",
      radius: 8,
      width: 114,
      height: 16
    }), /*#__PURE__*/_jsx(IOSkeleton, {
      shape: "rectangle",
      radius: 16,
      width: 42,
      height: 20
    })]
  })
});
//# sourceMappingURL=ModuleAttachment.js.map