// Metro module 9782 (f9783).
import { useMemo } from "react";
import { View } from "react-native";
import { PREMIUM_YEARLY_DISCOUNT_PERCENT, SubscriptionIntervalTypes } from "../../PremiumConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
import { RowButton } from "../../../../design/components/TableRow/native/RowButton.native";
import usePremiumProductPricingString from "../hooks/usePremiumProductPricingString";
import { useRadioA11yNative } from "../../../../_bundle/Module3907";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import NitroGiftPriceCopyExperiment from "../../gifting/experiments/NitroGiftPriceCopyExperiment";
import useInitialValue from "../../../../hooks/useInitialValue";
let c6487_9, useStyles, useStyles2;
const PremiumGiftDurationButton = function PremiumGiftDurationButton(props) {
  let selected = props.selected;
  const planInterval = props.planInterval;
  const nativeGiftContext = useNativeGiftContext();
  const { premiumType, setPlanInterval } = nativeGiftContext;
  const styles = useStyles();
  const Component = selected ? TableRow : RowButton;
  const discount = planInterval === SubscriptionIntervalTypes.YEAR ? `${PREMIUM_YEARLY_DISCOUNT_PERCENT}%` : null;
  const premiumProductPricingString = usePremiumProductPricingString(premiumType, planInterval);
  const radioA11yNative = useRadioA11yNative({
    selected
  });
  const { accessibilityRole, accessibilityState } = radioA11yNative;
  const style = [styles.container, ,];
  if (selected) {
    selected = styles.containerSelected;
  }
  style[1] = selected;
  return <View style={style}>
    <Component label={<View style={styles.labelContainer}>
      <Text variant="text-md/semibold">
        {planInterval === SubscriptionIntervalTypes.MONTH ? intl.string(t.Mh9bTt) : intl.string(t.DRgqMo)}
      </Text>
      {discount != null && <View style={styles.labelPromo}>
        <Text variant="text-md/bold" color="text-overlay-light">
          {intl.formatToPlainString(t.IAybsG, {
            discount
          }).toUpperCase()}
        </Text>
      </View>}
    </View>} trailing={<Text variant="text-md/semibold">{premiumProductPricingString}</Text>} onPress={() => {
      setPlanInterval(planInterval);
    }} arrow={false} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} start end />
  </View>;
};
c6487_9 = [SubscriptionIntervalTypes.YEAR, SubscriptionIntervalTypes.MONTH];
useStyles = createStyles({
  container: {
    marginTop: Module712.space.PX_8
  },
  containerSelected: {
    borderColor: Module712.colors.BACKGROUND_BRAND,
    borderRadius: Module712.radii.lg,
    borderWidth: 2
  },
  labelContainer: {
    flexDirection: "row"
  },
  labelPromo: {
    marginStart: Module712.space.PX_8,
    backgroundColor: Module712.colors.STATUS_POSITIVE_BACKGROUND,
    paddingHorizontal: Module712.space.PX_8,
    borderRadius: Module712.radii.round
  }
});
useStyles2 = createStyles({
  durationContainer: {
    marginHorizontal: Module712.space.PX_16
  },
  durationTitle: {
    marginTop: Module712.space.PX_24
  }
});
export default function PremiumGiftDuration() {
  const styles2 = useStyles2();
  const planInterval2 = useNativeGiftContext().planInterval;
  const initialValue = useInitialValue(NitroGiftPriceCopyExperiment.useConfig({
    location: "PremiumGiftDuration"
  }).monthlyDefaultSelected);
  let c17486_1 = initialValue;
  const memo = useMemo(() => c17486_1 ? [...c6487_9].reverse() : c6487_9, [initialValue]);
  return <View style={styles2.durationContainer}>
    <Text style={styles2.durationTitle} variant="text-sm/semibold">
      {intl.string(t["8XT6Nf"])}
    </Text>
    {memo.map((item, index) => <PremiumGiftDurationButton key={index} selected={planInterval2 === item} planInterval={item} />)}
  </View>;
};