// Metro module 14174 (f14175).
import { memo, useCallback } from "react";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { useVideoQuestModalContext } from "./VideoQuestModalContext";
import { useQuestTaskDetails } from "../../hooks/QuestHooks";
import { openRewardDetailsBottomSheet } from "../QuestUtils.native";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import Module712 from "../../../../_bundle/Module712";
import QuestProgressIndicator from "../QuestProgressIndicator";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  questName: {
    textAlign: "center"
  }
});
const r27 = memo(function VideoQuestModalReward(props) {
  const { style, withQuestName } = props;
  let r9 = withQuestName === void 0 || withQuestName;
  const withRewardAvailableCopy = props.withRewardAvailableCopy;
  let r8 = withRewardAvailableCopy === void 0 || withRewardAvailableCopy;
  const { size: size2 = "lg", withRewardTileAnimation, onTextBlockLayout } = props;
  const quest = useVideoQuestModalContext().quest;
  const questTaskDetails = useQuestTaskDetails(quest);
  const callback = useCallback(() => {
    openRewardDetailsBottomSheet({
      questId: quest.id
    });
  }, [quest.id]);
  const styles = useStyles();
  const r48 = [<QuestProgressIndicator hasConfetti quest={quest} size={size2} progress={questTaskDetails.percentComplete} onPress={callback} withAnimation={withRewardTileAnimation} />, ,];
  if (r9) {
    r9 = <Text variant="heading-lg/semibold" color="text-strong" style={styles.questName}>
      {intl.formatToPlainString(t.EAYZAr, {
        questName: quest.config.messages.questName
      })}
    </Text>;
  }
  const r75 = [r9, ,];
  if (r8) {
    r8 = <Text variant="heading-sm/medium" color="text-subtle">
      {intl.string(t["1Wvve2"])}
    </Text>;
  }
  r75[1] = r8;
  r48[1] = <Stack align="center" spacing={Module712.space.PX_4} onLayout={onTextBlockLayout}>{r75}</Stack>;
  return <Stack justify="center" align="center" spacing={Module712.space.PX_24} style={style}>{r48}</Stack>;
});
export default r27;