// Metro module 14169 (f14170).
import { useMemo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../../_bundle/Module712";
import Module689 from "../../../../../_bundle/Module689";
import { useVideoQuestCaptions } from "../hooks/useVideoQuestCaptions";
import { findActiveCaption } from "./VideoQuestCaptionsUtils";
import VisualEffectView from "../../../../visual_effect_view/native/VisualEffectView";
import { Text } from "../../../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    position: "absolute",
    bottom: Module712.space.PX_32,
    left: Module712.space.PX_16,
    right: Module712.space.PX_16,
    alignItems: "center",
    justifyContent: "flex-end"
  },
  captionBox: {
    backgroundColor: Module689(Module712.unsafe_rawColors.BLACK).alpha(0.35).hex(),
    padding: Module712.space.PX_8,
    borderRadius: Module712.radii.sm,
    overflow: "hidden"
  },
  captionText: {
    color: Module712.colors.WHITE,
    textAlign: "center"
  }
});
export function VideoQuestCaptions(props) {
  const { quest, currentTime, style, visible = true } = props;
  let c21001_1 = visible;
  const styles = useStyles();
  const videoQuestCaptions = useVideoQuestCaptions(quest);
  const { captions, status } = videoQuestCaptions;
  const memo = useMemo(() => captions != null ? c21001_1 ? findActiveCaption(captions, currentTime) : null : null, [captions, currentTime, visible]);
  return status === "success" ? memo == null ? null : <View style={[styles.container, style]} importantForAccessibility="no-hide-descendants" accessibilityRole="none" accessible={false}>
    <VisualEffectView style={styles.captionBox} blurTheme="dark" blurStyle="default" blurAmount={0.2}>
      <Text variant="heading-sm/medium" style={styles.captionText}>{memo.text}</Text>
    </VisualEffectView>
  </View> : null;
}