// Metro module 10018 (f10019).
import { useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useOAuth2AuthorizeForm from "./useOAuth2AuthorizeForm";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { withSpring } from "../../../design/animation/reanimated/spring/spring";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../intl/index.native";
import { ArrowSmallLeftIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowSmallLeftIcon";
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import OAuth2AuthorizeContent from "./OAuth2AuthorizeContent";
let c6663_7 = {
  overshootClamping: true,
  stiffness: 20,
  damping: 15,
  mass: 0.03
};
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  contentContainer: {
    flex: 1
  },
  titleContainer: {
    padding: 16,
    flexDirection: "row",
    gap: 16
  },
  titleContainerBorder: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    height: 1,
    backgroundColor: Module712.colors.BORDER_SUBTLE
  },
  title: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    marginEnd: 40
  }
});
const __initData = {
  code: "function OAuth2AuthorizeModalTsx1(){const{borderOpacity}=this.__closure;var _borderOpacity$get;return{opacity:(_borderOpacity$get=borderOpacity.get())!==null&&_borderOpacity$get!==void 0?_borderOpacity$get:1};}"
};
export default function OAuth2AuthorizeModal(props) {
  const styles = useStyles();
  const oAuth2AuthorizeForm = useOAuth2AuthorizeForm(props);
  let c17628_0 = oAuth2AuthorizeForm;
  const top = useSafeAreaInsets_native().top;
  const sharedValue = useSharedValue(0);
  const b = function b() {
    let opacity = sharedValue.get();
    if (opacity == null) {
      opacity = 1;
    }
    return {
      opacity
    };
  };
  b.__closure = {
    borderOpacity: sharedValue
  };
  b.__workletHash = 5916964482569;
  b.__initData = __initData;
  const animatedStyle = useAnimatedStyle(b);
  const callback = useCallback((a0) => {
    sharedValue.set(withSpring(a0.nativeEvent.contentOffset.y > 16 ? 1 : 0, c6663_7));
  }, [sharedValue]);
  return <View style={styles.container}>
    <View style={[styles.titleContainer, {
      paddingTop: top + 16
    }]}>
      <PressableOpacity accessibilityRole="button" accessibilityLabel={oAuth2AuthorizeForm.backStep != null ? intl.string(t["13/7kX"]) : intl.string(t.cpT0Cq)} onPress={() => {
        const goBackOrCancel = c17628_0.goBackOrCancel;
        return goBackOrCancel == null ? void 0 : goBackOrCancel.call(c17628_0);
      }}>
        {oAuth2AuthorizeForm.backStep != null ? <ArrowSmallLeftIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} /> : <XSmallIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />}
      </PressableOpacity>
      <View style={styles.title}>
        <Text variant="redesign/heading-18/bold" accessibilityRole="header">
          {intl.string(t["y+/PE9"])}
        </Text>
      </View>
      <ReanimatedRexport.View style={[styles.titleContainerBorder, animatedStyle]} />
    </View>
    <SafeAreaPaddingView bottom style={styles.contentContainer}>
      <OAuth2AuthorizeContent {...oAuth2AuthorizeForm} onScroll={callback} centerContent />
    </SafeAreaPaddingView>
  </View>;
};