// Metro module 15859 (f15860).
import { useState, useMemo, useCallback } from "react";
import { Pressable, View } from "react-native";
import QuestStore from "../QuestStore";
import UnenrolledActivityQuestStore from "../UnenrolledActivityQuestStore";
import { QuestsExperimentLocations } from "../QuestConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import * as _Module501 from "../../../_bundle/Module501";
import { useTheme } from "../../../hooks/useTheme";
import { isThemeDark } from "../../../design/utils/shared/themes";
import { useStateFromStores } from "../../../_bundle/Module589";
import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
import { getActivityApplicationId } from "../utils/QuestTaskUtils";
import { useQuestTaskDetails } from "../hooks/QuestHooks";
import { useQuestsInstructionsToWinReward } from "../hooks/QuestCopyHooks";
import { QuestContent } from "../QuestTypes";
import AvatarUtils from "../../../utils/AvatarUtils";
import { enrollInQuest, dismissQuestActivityModal, setAutoEnroll } from "../QuestActionCreators";
import { QuestContentCTA } from "../lib/analytics/AnalyticsTypes";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { useCheckboxA11yNative } from "../../../_bundle/Module3907";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import FastImage from "../../../components_native/common/FastImage";
import QuestRewardTile from "./QuestRewardTile";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { FormCheckbox } from "../../../design/components/Forms/native/FormCheckbox.native";
import { HeaderActionButton } from "../../../design/components/Navigator/native/HeaderActionButton.native";
import Module7699 from "../../../_bundle/Module7699";
import { QuestContentImpressionTrackerNative } from "./QuestContentImpressionTracker.native";
import { Modal } from "../../../design/components/Modal/native/Modal.native";
import { HermesBuiltin } from "../../../_hermes/prelude";
let c11350_13, useStyles, CloseButton;
const QuestActivityUnenrolledModalInner = function QuestActivityUnenrolledModalInner(props) {
  let state, setState, getOrFetchApplication;
  const quest = props.quest;
  state = void 0;
  setState = void 0;
  getOrFetchApplication = void 0;
  const styles = useStyles(isThemeDark(useTheme()));
  [state, setState] = useState(useStateFromStores([UnenrolledActivityQuestStore], () => UnenrolledActivityQuestStore.getState().autoEnroll));
  getOrFetchApplication = useGetOrFetchApplication(getActivityApplicationId(quest));
  const questsInstructionsToWinReward = useQuestsInstructionsToWinReward({
    quest,
    taskDetails: useQuestTaskDetails(quest),
    location: QuestsExperimentLocations.QUEST_ACTIVITY_UNENROLLED_MODAL,
    sourceQuestContent: QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL
  });
  const memo = useMemo(() => getOrFetchApplication != null ? AvatarUtils.getApplicationIconURL({
    id: getOrFetchApplication.id,
    icon: getOrFetchApplication.icon,
    size: 87
  }) : null, [getOrFetchApplication]);
  const callback = useCallback(async () => {
    let c28168_0;
    c28168_0 = void 0;
    await enrollInQuest(quest.id, {
      questContent: QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL,
      questContentCTA: QuestContentCTA.START_QUEST,
      sourceQuestContent: QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL
    });
    ModalActionCreators.pop();
  }, [quest.id]);
  const checkboxA11yNative = useCheckboxA11yNative({
    checked: state
  });
  const { accessibilityRole, accessibilityState } = checkboxA11yNative;
  return <Stack direction="vertical" align="center" justify="center" style={styles.container}>
    <View style={styles.content}>
      <View style={styles.baseShadow}>
        <View style={styles.imagesContainer}>
          {memo != null && <View style={styles.appIconContainer}>
            <FastImage source={{
              uri: memo
            }} style={styles.appIcon} />
          </View>}
          <View style={styles.rewardTileContainer}>
            <QuestRewardTile quest={quest} height={87} width={87} style={styles.questRewardTile} />
          </View>
        </View>
      </View>
      <View style={styles.textContainer}>
        <Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={{
          textAlign: "center"
        }}>
          {intl.string(t.IrNgN4)}
        </Text>
        <Text variant="text-sm/normal" color="text-subtle" style={{
          textAlign: "center"
        }}>
          {intl.format(t.V3NSJx, {
            questName: quest.config.messages.questName
          })}
          {" "}
          {questsInstructionsToWinReward}
        </Text>
      </View>
    </View>
    <View style={styles.footer}>
      <View style={styles.buttonsContainer}>
        <Button size="lg" text={intl.string(t.l7E81v)} onPress={callback} />
        <Button size="lg" text={intl.string(t.fyT2ol)} onPress={function onPress() {
          dismissQuestActivityModal(quest.id);
          ModalActionCreators.pop();
        }} variant="secondary" />
      </View>
      <Pressable accessibilityRole={accessibilityRole} accessibilityLabel={intl.string(t["931n1T"])} accessibilityState={accessibilityState} onPress={() => {
        const r0 = !state;
        setState(r0);
        setAutoEnroll(r0);
      }} style={{
        alignSelf: "center",
        flexDirection: "row",
        alignItems: "center",
        gap: 8
      }}>
        <FormCheckbox checked={state} />
        <Text variant="text-sm/normal" color="text-subtle">
          {intl.string(t["931n1T"])}
        </Text>
      </Pressable>
    </View>
  </Stack>;
};
CloseButton = function CloseButton() {
  return <HeaderActionButton source={Module7699} onPress={function onPress() {
    return ModalActionCreators.pop();
  }} accessibilityLabel={intl.string(t.cpT0Cq)} />;
};
c11350_13 = {
  MAIN: "main"
};
useStyles = createStyles((a0) => {
  let baseShadow;
  const imagesContainer = {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: Module712.space.PX_32,
    ..._Module501.isIOS() ? a0 ? {
      shadowColor: "rgb(144, 144, 251)",
      shadowOffset: {
        width: 0,
        height: 0
      },
      shadowOpacity: 0.6,
      shadowRadius: 85
    } : {} : {
      filter: a0 ? [{
        dropShadow: {
          standardDeviation: "85px",
          color: "rgba(144, 144, 251, 0.65)",
          offsetX: 0,
          offsetY: 0
        }
      }, {
        dropShadow: {
          standardDeviation: "85px",
          color: "rgba(144, 144, 250, 0.41)",
          offsetX: 0,
          offsetY: 0
        }
      }] : []
    }
  };
  const isIOS = _Module501.isIOS();
  const r49 = {};
  if (isIOS) {
    HermesBuiltin.copyDataProperties(r49, a0 ? {
      shadowColor: "rgb(144, 144, 250)",
      shadowOffset: {
        width: 0,
        height: 16
      },
      shadowOpacity: 0.4,
      shadowRadius: 85
    } : {});
    baseShadow = r49;
  } else {
    baseShadow = r49;
  }
  return {
    container: {
      flex: 1,
      paddingHorizontal: Module712.space.PX_24,
      paddingVertical: Module712.space.PX_16,
      paddingBottom: Module712.space.PX_48
    },
    content: {
      marginTop: "auto"
    },
    imagesContainer,
    baseShadow,
    appIconContainer: {
      borderRadius: Module712.radii.xl,
      borderWidth: 2.18,
      borderColor: "rgba(151, 151, 159, 0.24)",
      borderStyle: "solid",
      transform: [{
        rotate: "-12.41deg"
      }],
      overflow: "hidden"
    },
    appIcon: {
      width: 87,
      height: 87,
      borderRadius: Module712.radii.xl - 2.18
    },
    rewardTileContainer: {
      borderWidth: 2.18,
      borderColor: "rgba(151, 151, 159, 0.24)",
      borderRadius: Module712.radii.xl,
      borderStyle: "solid",
      transform: [{
        translateX: -10
      }, {
        rotate: "7.81deg"
      }],
      overflow: "hidden"
    },
    questRewardTile: {
      borderRadius: Module712.radii.xl - 2.18
    },
    textContainer: {
      alignItems: "center",
      gap: Module712.space.PX_8
    },
    buttonsContainer: {
      flexDirection: "column",
      gap: Module712.space.PX_8,
      marginBottom: 20
    },
    footer: {
      flexDirection: "column",
      width: "100%",
      marginTop: "auto"
    }
  };
});
export default function QuestActivityUnenrolledModal(props) {
  const questId = props.questId;
  const stateFromStores = useStateFromStores([QuestStore], () => QuestStore.getQuest(questId));
  if (stateFromStores == null) {
    return null;
  }
  const screens = {};
  screens[c11350_13.MAIN] = {
    headerLeft: CloseButton,
    headerRight: function headerRight() {
      return null;
    },
    headerTitle: () => <Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary">
      {intl.string(t.l7E81v)}
    </Text>,
    render: () => <QuestContentImpressionTrackerNative questOrQuests={stateFromStores} questContent={QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL} sourceQuestContent={QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL}>
      {() => <QuestActivityUnenrolledModalInner quest={stateFromStores} />}
    </QuestContentImpressionTrackerNative>
  };
  return <Modal screens={screens} initialRouteName={c11350_13.MAIN} />;
};