"use strict";

import { StyleSheet, View } from "react-native";
import { useIOTheme } from "../../context";
import { IOListItemVisualParams } from "../../core";
import { Badge } from "../badge";
import { Icon } from "../icons";
import { HStack, VStack } from "../layout";
import { IOSkeleton } from "../skeleton";
import { Body, BodySmall, H6 } from "../typography";
import { ModuleStatic } from "./ModuleStatic";
import { PressableModuleBase } from "./PressableModuleBase";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = StyleSheet.create({
  endBlock: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end"
  }
});
const AmountOrBadgeComponent = ({
  status,
  amount,
  amountAccessibilityLabel,
  badgeText
}) => {
  const theme = useIOTheme();
  switch (status) {
    case "default":
      return /*#__PURE__*/_jsx(H6, {
        accessibilityLabel: amountAccessibilityLabel,
        color: theme["interactiveElem-default"],
        numberOfLines: 1,
        children: amount
      });
    case "paid":
      return /*#__PURE__*/_jsx(Badge, {
        variant: "success",
        text: badgeText
      });
    case "error":
      return /*#__PURE__*/_jsx(Badge, {
        variant: "error",
        text: badgeText
      });
    case "expired":
    case "revoked":
    case "canceled":
    case "in-progress":
      return /*#__PURE__*/_jsx(Badge, {
        variant: "default",
        text: badgeText
      });
  }
};
const ModulePaymentNoticeContent = ({
  title,
  subtitle,
  paymentNotice: {
    status,
    amount,
    amountAccessibilityLabel
  },
  badgeText = ""
}) => {
  const theme = useIOTheme();
  return /*#__PURE__*/_jsxs(HStack, {
    space: IOListItemVisualParams.iconMargin,
    children: [/*#__PURE__*/_jsxs(View, {
      style: {
        flexGrow: 1,
        flexShrink: 1
      },
      children: [title && /*#__PURE__*/_jsx(BodySmall, {
        numberOfLines: 1,
        weight: "Regular",
        color: theme["textBody-tertiary"],
        children: title
      }), subtitle && /*#__PURE__*/_jsx(Body, {
        color: theme["interactiveElem-default"],
        numberOfLines: 2,
        weight: "Semibold",
        children: subtitle
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.endBlock,
      children: [/*#__PURE__*/_jsx(AmountOrBadgeComponent, {
        status: status,
        amount: amount,
        amountAccessibilityLabel: amountAccessibilityLabel,
        badgeText: badgeText
      }), /*#__PURE__*/_jsx(Icon, {
        name: "chevronRightListItem",
        color: theme["interactiveElem-default"],
        size: IOListItemVisualParams.chevronSize
      })]
    })]
  });
};

/**
 * The `ModulePaymentNotice` component is a custom button component with an extended outline style.
 * It provides an animated scaling effect when pressed.
 *
 * @param {boolean} isLoading - If true, displays a skeleton loading component.
 * @param {function} onPress - The function to be executed when the item is pressed.
 * @param {string} title - The title text to display.
 * @param {string} subtitle - The subtitle text to display.
 * @param {string} testID - The test ID for testing purposes.
 * @param {string} paymentNoticeAmount - The payment notice amount to display.
 * @param {string} paymentNoticeStatus - The status of the payment notice.
 */
export const ModulePaymentNotice = ({
  isLoading = false,
  testID,
  accessibilityLabel,
  onPress,
  loadingAccessibilityLabel,
  ...rest
}) => {
  if (isLoading) {
    return /*#__PURE__*/_jsx(ModulePaymentNoticeSkeleton, {
      loadingAccessibilityLabel: loadingAccessibilityLabel
    });
  }
  return /*#__PURE__*/_jsx(PressableModuleBase, {
    onPress: onPress,
    accessibilityLabel: accessibilityLabel,
    testID: testID,
    children: /*#__PURE__*/_jsx(ModulePaymentNoticeContent, {
      ...rest
    })
  });
};
const ModulePaymentNoticeSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/_jsx(ModuleStatic, {
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  startBlock: /*#__PURE__*/_jsxs(VStack, {
    space: 4,
    children: [/*#__PURE__*/_jsx(IOSkeleton, {
      shape: "rectangle",
      width: 120,
      height: 12,
      radius: 8
    }), /*#__PURE__*/_jsx(IOSkeleton, {
      shape: "rectangle",
      width: 180,
      height: 16,
      radius: 8
    })]
  }),
  endBlock: /*#__PURE__*/_jsx(IOSkeleton, {
    shape: "rectangle",
    width: 64,
    height: 24,
    radius: 16
  })
});
//# sourceMappingURL=ModulePaymentNotice.js.map