// Metro module 6548 (f6549).
import { View } from "react-native";
import { isNoneSubscription } from "../../../records/SubscriptionPlanRecord";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { DARK_PRIMARY_630_LIGHT_PRIMARY_230, DARK_PRIMARY_300_LIGHT_PRIMARY_500 } from "../../../design/migrations/native/LegacyTokens";
import { WarningCircle, LegacyText } from "../../../design/void/native";
import { intl, t } from "../../../intl/index.native";
import PremiumUtils, { getExternalPlanDisplayName } from "../../../utils/PremiumUtils";
const useStyles = createStyles({
  container: {
    padding: 10,
    marginVertical: 5,
    marginHorizontal: 15,
    borderRadius: Module712.radii.xs,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    backgroundColor: DARK_PRIMARY_630_LIGHT_PRIMARY_230
  },
  icon: {
    alignSelf: "center",
    marginLeft: 15,
    color: DARK_PRIMARY_300_LIGHT_PRIMARY_500
  },
  text: {
    paddingLeft: 10,
    marginRight: 15,
    color: DARK_PRIMARY_300_LIGHT_PRIMARY_500
  }
});
export default function SubscriptionRenewalMutationsNotice(props) {
  const { subscription, renewalMutations } = props;
  const styles = useStyles();
  return <View style={styles.container}>
    <WarningCircle style={styles.icon} />
    <LegacyText style={styles.text}>
      {intl.format(t.ar1cPl, {
        planName: !subscription.hasExternalPlanChange && !isNoneSubscription(renewalMutations.planId) ? PremiumUtils.getDisplayName(renewalMutations.planId) : getExternalPlanDisplayName(renewalMutations),
        date: subscription.currentPeriodEnd
      })}
    </LegacyText>
  </View>;
};