// Metro module 14179 (f14180).
import { useEffect, useMemo } from "react";
import { ActivityIndicator } from "react-native";
import { FetchStatus, useVideoQuestUIStore } from "../../VideoQuestUIStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { getQuestAsset, QuestAssetType } from "../../lib/AssetUtils";
import { fetchVideoTranscript } from "../../QuestActionCreators";
import { ActionSheet } from "../../../../design/components/Sheet/native/ActionSheet.native";
import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
import { intl, t } from "../../../../intl/index.native";
import { BottomSheetScrollView } from "../../../../_bundle/Module5245";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles({
  content: {
    paddingBottom: Module712.space.PX_8
  },
  loadingSpinner: {
    height: 100
  }
});
export default function VideoQuestTranscriptActionSheet(props) {
  const quest = props.quest;
  const styles = useStyles();
  const videoQuestUIStore = useVideoQuestUIStore((a0) => a0.transcript);
  const bottom = useSafeAreaInsets_native().bottom;
  useEffect(() => {
    const questAsset = getQuestAsset(quest, QuestAssetType.VIDEO_PLAYER_TRANSCRIPT, void 0, true);
    if (videoQuestUIStore == null || videoQuestUIStore.questId !== quest.id || videoQuestUIStore.fetchStatus === FetchStatus.NONE || videoQuestUIStore.fetchStatus === FetchStatus.SUCCESS && questAsset?.url !== videoQuestUIStore.url) {
      fetchVideoTranscript(quest, true);
    }
  }, [quest, videoQuestUIStore]);
  const memo = useMemo(() => videoQuestUIStore?.text == null ? [] : videoQuestUIStore.text.split("\n").map((item) => item.trim()).filter((item) => item.length > 0), [videoQuestUIStore?.text]);
  return <ActionSheet scrollable header={<BottomSheetTitleHeader title={intl.string(t["1YS80z"])} />}>
    <BottomSheetScrollView contentContainerStyle={{
      paddingBottom: bottom
    }}>
      <Stack spacing={16} style={styles.content}>
        {videoQuestUIStore?.fetchStatus === FetchStatus.FETCHING && <ActivityIndicator style={styles.loadingSpinner} size="large" />}
        {memo.length > 0 && memo.map((item, index) => <Text key={index} variant="heading-md/normal" color="text-muted">
          {item}
        </Text>)}
      </Stack>
    </BottomSheetScrollView>
  </ActionSheet>;
};