// Metro module 16113 (f16114).
import { useEffect, useRef, useState, useCallback } from "react";
import { View, StyleSheet } from "react-native";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ActivityIndicator } from "../../../design/components/ActivityIndicator/native/ActivityIndicator.native";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import useFormattedEndTime from "../hooks/useFormattedEndTime";
import { useStateFromStores } from "../../../_bundle/Module589";
import ReanimatedRexport, { useSharedValue, Easing, withDelay, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { ModalScreen } from "../../../design/components/Modal/native/ModalScreen.native";
import * as _Module16115 from "../../../_bundle/Module16115";
import { TeenScreenTimeRive } from "../../../_bundle/Module3901";
import { Text } from "../../../design/components/Text/native/Text";
import { useNavigatorScreens } from "../../../design/components/Navigator/native/Navigator.native";
import useIsInRestrictedHours from "../hooks/useIsInRestrictedHours";
import AuthenticationActionCreators from "../../../actions/AuthenticationActionCreators";
import { closeRestrictedHoursModal } from "../RestrictedHoursActionCreators.native";
import useBackPressHandler from "../../routing/native/useBackPressHandler";
import { Modal } from "../../../design/components/Modal/native/Modal.native";
let backgroundColor, useStyles, c11538_11, __initData, __initData2, __initData3, RestrictedHoursScreen;
const RestrictedHoursLogoutBlockingLayer = function RestrictedHoursLogoutBlockingLayer(props) {
  const visible = props.visible;
  const styles = useStyles();
  return visible ? <View style={styles.logoutBlockingLayer} pointerEvents="auto" accessibilityLiveRegion="polite">
    <ActivityIndicator size="large" />
  </View> : null;
};
RestrictedHoursScreen = function RestrictedHoursScreen(props) {
  let sharedValue, sharedValue2, sharedValue3, sharedValue4;
  const { onLogin, logoutRequestInFlight } = props;
  sharedValue = void 0;
  sharedValue2 = void 0;
  sharedValue3 = void 0;
  sharedValue4 = void 0;
  const styles = useStyles();
  const safeAreaInsets_native = useSafeAreaInsets_native();
  const { top, bottom } = safeAreaInsets_native;
  const formattedEndTime = useFormattedEndTime();
  const stateFromStores = useStateFromStores([UserStore], () => {
    let r6 = UserStore.getCurrentUser()?.username;
    if (r6 == null) {
      r6 = "";
    }
    return r6;
  });
  sharedValue = useSharedValue(0);
  sharedValue2 = useSharedValue(0);
  sharedValue3 = useSharedValue(0);
  sharedValue4 = useSharedValue(0.9);
  useEffect(() => {
    sharedValue.set(withTiming(1, {
      duration: 3000,
      easing: Easing.bezier(0.24, 0.27, 0.58, 1)
    }));
    sharedValue2.set(withDelay(1500, withTiming(1, {
      duration: 1500,
      easing: Easing.bezier(0, 0, 1, 1)
    })));
    sharedValue3.set(withDelay(2000, withTiming(1, {
      duration: 1000,
      easing: Easing.bezier(0.1, 0.24, 0.32, 1)
    })));
    sharedValue4.set(withDelay(2000, withTiming(1, {
      duration: 1000,
      easing: Easing.bezier(0.1, 0.24, 0.32, 1)
    })));
  }, [sharedValue, sharedValue2, sharedValue3, sharedValue4]);
  const M = () => ({
    opacity: sharedValue.get()
  });
  M.__closure = {
    backgroundOpacity: sharedValue
  };
  M.__workletHash = 17073775693336;
  M.__initData = __initData;
  const animatedStyle2 = useAnimatedStyle(M);
  const O = () => ({
    opacity: sharedValue2.get()
  });
  O.__closure = {
    gradientOpacity: sharedValue2
  };
  O.__workletHash = 16592270370139;
  O.__initData = __initData2;
  const animatedStyle = useAnimatedStyle(O);
  const z = () => ({
    opacity: sharedValue3.get(),
    transform: [{
      scale: sharedValue4.get()
    }]
  });
  z.__closure = {
    contentOpacity: sharedValue3,
    contentScale: sharedValue4
  };
  z.__workletHash = 15616799997783;
  z.__initData = __initData3;
  return <ModalScreen backgroundColor={backgroundColor}>
    <ReanimatedRexport.View style={[styles.container, {
      paddingTop: top,
      paddingBottom: bottom
    }, animatedStyle2]}>
      <View style={styles.backgroundFill} pointerEvents="none" />
      <ReanimatedRexport.View style={[styles.assetLayers, animatedStyle]} pointerEvents="none">
        <ReanimatedRexport.Image source={_Module16115} resizeMode="cover" style={styles.sunbeamGradient} />
      </ReanimatedRexport.View>
      <ReanimatedRexport.View style={[styles.content, useAnimatedStyle(z)]}>
        <View style={styles.riveContainer}>
          <TeenScreenTimeRive artboard="Teen Screen Time Illo" stateMachine="State Machine 1" />
        </View>
        <Text variant="text-lg/medium" color="text-overlay-light" style={styles.description}>
          {formattedEndTime != null ? intl.format(FamilyCenter_messages.VfqJvY, {
            endTime: formattedEndTime
          }) : intl.string(FamilyCenter_messages.abikhN)}
        </Text>
      </ReanimatedRexport.View>
      <View style={styles.footer}>
        <Text variant="text-sm/medium" color="text-subtle" style={styles.description}>
          {intl.format(FamilyCenter_messages.iqeKDz, {
            username: stateFromStores,
            loginHook: (a0, a1) => <Text key={a1} variant="text-sm/normal" color="text-link" onPress={onLogin}>
              {a0}
            </Text>
          })}
        </Text>
      </View>
    </ReanimatedRexport.View>
    <RestrictedHoursLogoutBlockingLayer visible={logoutRequestInFlight} />
  </ModalScreen>;
};
backgroundColor = "rgb(0, 3, 40)";
useStyles = createStyles({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_24
  },
  backgroundFill: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 0,
    backgroundColor: "rgb(0, 3, 40)"
  },
  assetLayers: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 1
  },
  sunbeamGradient: {
    ...StyleSheet.absoluteFillObject
  },
  riveContainer: {
    width: "100%",
    maxWidth: 523,
    height: 300
  },
  content: {
    alignItems: "center",
    width: "100%",
    gap: Module712.space.PX_16,
    zIndex: 2
  },
  description: {
    textAlign: "center"
  },
  footer: {
    position: "absolute",
    bottom: Module712.space.PX_32,
    alignSelf: "center",
    zIndex: 2
  },
  logoutBlockingLayer: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 10,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgb(0, 3, 40)"
  }
});
c11538_11 = {
  MAIN: "main"
};
__initData = {
  code: "function RestrictedHoursModalTsx1(){const{backgroundOpacity}=this.__closure;return{opacity:backgroundOpacity.get()};}"
};
__initData2 = {
  code: "function RestrictedHoursModalTsx2(){const{gradientOpacity}=this.__closure;return{opacity:gradientOpacity.get()};}"
};
__initData3 = {
  code: "function RestrictedHoursModalTsx3(){const{contentOpacity,contentScale}=this.__closure;return{opacity:contentOpacity.get(),transform:[{scale:contentScale.get()}]};}"
};
export default function RestrictedHoursModal() {
  let callback, state;
  const isInRestrictedHours = useIsInRestrictedHours();
  let c22801_0 = isInRestrictedHours;
  const ref = useRef(false);
  const ref2 = useRef(true);
  useEffect(() => {
    ref2.current = true;
    return () => {
      ref2.current = false;
    };
  }, []);
  const [state2, setState] = useState(false);
  callback = useCallback(() => {
    if (!ref.current) {
      ref.current = true;
      setState(true);
      AuthenticationActionCreators.logout("restricted_hours").finally(() => {
        if (ref2.current) {
          ref.current = false;
          setState(false);
        }
      });
    }
  }, []);
  state = state2;
  const navigatorScreens = useNavigatorScreens(() => {
    const r0 = {};
    r0[c11538_11.MAIN] = {
      headerShown: false,
      gestureEnabled: false,
      render: () => <RestrictedHoursScreen onLogin={callback} logoutRequestInFlight={state} />
    };
    return r0;
  }, [callback, state]);
  useEffect(() => {
    if (!(c22801_0 || ref.current)) {
      closeRestrictedHoursModal();
    }
  }, [isInRestrictedHours]);
  useBackPressHandler(() => true);
  return <Modal screens={navigatorScreens} initialRouteName={c11538_11.MAIN} />;
};