// Metro module 6549 (f6550).
import { Linking, View } from "react-native";
import { SubscriptionStatusTypes } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { Icon, IconSizes } from "../../../design/void/native";
import Module6550 from "../../../_bundle/Module6550";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { getDisplayName, getExternalSubscriptionMethodUrl } from "../../../utils/PremiumUtils";
import { Button } from "../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    padding: 8,
    margin: 8,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  textContainer: {
    flexDirection: "row"
  },
  icon: {
    marginRight: 4
  },
  text: {
    marginBottom: 8,
    flex: 1
  }
});
export default function SubscriptionAccountHoldNotice(props) {
  const subscription = props.subscription;
  const styles = useStyles();
  return subscription.status === SubscriptionStatusTypes.ACCOUNT_HOLD ? <View style={styles.container}>
    <View style={styles.textContainer}>
      <Icon size={IconSizes.MEDIUM} style={styles.icon} source={Module6550} />
      <Text style={styles.text} variant="text-sm/medium">
        {intl.format(t["7I21Iz"], {
          endDate: subscription.currentPeriodEnd,
          planDescription: getDisplayName(subscription.planId)
        })}
      </Text>
    </View>
    <Button size="sm" text={intl.string(t.VJmUNy)} onPress={() => Linking.openURL(getExternalSubscriptionMethodUrl(subscription.paymentGateway, "PAYMENT_SOURCE_MANAGEMENT"))} />
  </View> : null;
};