"use strict";

import { Image, StyleSheet, View } from "react-native";
import { useIOTheme } from "../../context";
import { IOSelectionListItemVisualParams } from "../../core";
import { IOButton } from "../buttons";
import { HStack, VStack } from "../layout";
import { LogoPayment } from "../logos";
import { IOSkeleton } from "../skeleton";
import { BodySmall, H6 } from "../typography";
import { ModuleStatic } from "./ModuleStatic";
import { PressableModuleBase } from "./PressableModuleBase";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const IMAGE_MARGIN = 12;
const ModuleBaseContent = ({
  paymentLogo,
  image,
  title,
  subtitle
}) => {
  const theme = useIOTheme();
  return /*#__PURE__*/_jsxs(HStack, {
    space: IMAGE_MARGIN,
    style: {
      alignItems: "center",
      flexShrink: 1
    },
    children: [paymentLogo ? /*#__PURE__*/_jsx(LogoPayment, {
      name: paymentLogo
    }) : image && /*#__PURE__*/_jsx(Image, {
      source: image,
      style: styles.image,
      accessibilityIgnoresInvertColors: true
    }), /*#__PURE__*/_jsxs(View, {
      style: {
        flexGrow: 1,
        flexShrink: 1
      },
      children: [/*#__PURE__*/_jsx(H6, {
        color: theme["textBody-default"],
        children: title
      }), subtitle && /*#__PURE__*/_jsx(BodySmall, {
        weight: "Regular",
        color: theme["textBody-tertiary"],
        children: subtitle
      })]
    })]
  });
};
export const ModuleCheckout = props => {
  if (props.isLoading) {
    return /*#__PURE__*/_jsx(ModuleCheckoutSkeleton, {
      loadingAccessibilityLabel: props.loadingAccessibilityLabel
    });
  }
  const {
    paymentLogo,
    image,
    title,
    subtitle,
    ctaText,
    onPress
  } = props;
  return ctaText ? /*#__PURE__*/_jsx(PressableModuleBase, {
    onPress: onPress,
    accessibilityLabel: subtitle ? `${title}, ${subtitle}, ${ctaText}` : `${title}, ${ctaText}`,
    children: /*#__PURE__*/_jsxs(HStack, {
      space: 4,
      style: {
        alignItems: "center"
      },
      children: [/*#__PURE__*/_jsx(ModuleBaseContent, {
        title: title,
        subtitle: subtitle,
        paymentLogo: paymentLogo,
        image: image
      }), /*#__PURE__*/_jsx(View, {
        pointerEvents: "none",
        accessibilityElementsHidden: true,
        importantForAccessibility: "no-hide-descendants",
        children: /*#__PURE__*/_jsx(IOButton, {
          variant: "link",
          label: ctaText,
          onPress: () => null
        })
      })]
    })
  }) : /*#__PURE__*/_jsx(ModuleStatic, {
    children: /*#__PURE__*/_jsx(ModuleBaseContent, {
      title: title,
      subtitle: subtitle,
      paymentLogo: paymentLogo,
      image: image
    })
  });
};
const ModuleCheckoutSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/_jsx(ModuleStatic, {
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  startBlock: /*#__PURE__*/_jsxs(HStack, {
    space: 8,
    style: {
      alignItems: "center"
    },
    children: [/*#__PURE__*/_jsx(IOSkeleton, {
      shape: "square",
      size: 24,
      radius: 8
    }), /*#__PURE__*/_jsxs(VStack, {
      space: 8,
      children: [/*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 170,
        height: 20,
        radius: 8
      }), /*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 110,
        height: 16,
        radius: 8
      })]
    })]
  }),
  endBlock: /*#__PURE__*/_jsx(IOSkeleton, {
    shape: "rectangle",
    width: 64,
    height: 16,
    radius: 8
  })
});
const styles = StyleSheet.create({
  image: {
    width: IOSelectionListItemVisualParams.iconSize,
    height: IOSelectionListItemVisualParams.iconSize,
    resizeMode: "contain"
  }
});
//# sourceMappingURL=ModuleCheckout.js.map