// Metro module 15385 (f15386).
import { useEffect, useState, useCallback } from "react";
import { View } from "react-native";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { Text } from "../../../design/components/Text/native/Text";
import { createICYMIStyles } from "./createICYMIStyles";
import Module712 from "../../../_bundle/Module712";
import ICYMIActionCreators from "../ICYMIActionCreators";
import { maybeFetchGuildDiscoveryCategories } from "../../global_discovery_servers/GuildDiscoveryCategoryActionCreators";
import { pushICYMIInfoModal } from "./NativeICYMIUtils";
import { getRootNavigationRef } from "../../main_tabs_v2/RootNavigationRef.native";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import { useToken } from "../../../design/tokens/native/useToken";
import { FlashIcon } from "../../../design/components/Icon/native/redesign/generated/FlashIcon";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { Separator } from "./ICYMIShared";
import Module4611 from "../../../_bundle/Module4611";
import { VerticalGradient } from "../../../ConstantsIOS";
import Module689 from "../../../_bundle/Module689";
function $mk116936($env) {
  return () => {
    pushICYMIInfoModal({
      extendedOnboarding: true,
      skipIntro: true
    });
    setTimeout($mk118478($env), 500);
  };
}
function $mk118478($env) {
  return () => {
    (0, setState)(false);
  };
}
let __initData, __initData2, __initData3;
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Text);
const styles = createICYMIStyles((a0) => ({
  container: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginVertical: Module712.space.PX_32
  },
  textContainer: {
    marginHorizontal: a0.margin,
    marginBottom: Module712.space.PX_24
  },
  recommendedGuildsContainer: {
    flex: 1,
    marginBottom: Module712.space.PX_24
  },
  iconWrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginBottom: Module712.space.PX_24
  },
  icon: {
    height: 40,
    width: 40
  },
  headerText: {
    alignSelf: "center",
    marginBottom: Module712.space.PX_8,
    textAlign: "center"
  },
  subtitleText: {
    alignSelf: "center",
    textAlign: "center"
  },
  buttonContainer: {
    flex: 1,
    width: "100%",
    gap: Module712.space.PX_12,
    paddingHorizontal: a0.margin
  },
  gradient: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: 150
  }
}));
__initData = {
  code: "function CaughtUpRowTsx1(){const{visibleSharedValue,withTiming,Easing}=this.__closure;return{transform:[{translateY:visibleSharedValue.get()?withTiming(0,{duration:250,easing:Easing.bezier(0.5,1.8,0.5,1)}):-80}],opacity:visibleSharedValue.get()?withTiming(1,{duration:100,easing:Easing.out(Easing.bezierFn(0.33,1,0.68,1))}):0};}"
};
__initData2 = {
  code: "function CaughtUpRowTsx2(){const{visibleSharedValue,withDelay,withSequence,withTiming,Easing}=this.__closure;return{transform:[{translateY:visibleSharedValue.get()?withDelay(80,withSequence(withTiming(8,{duration:100,easing:Easing.inOut(Easing.ease)}),withTiming(0,{duration:300,easing:Easing.out(Easing.ease)}))):0}]};}"
};
__initData3 = {
  code: "function CaughtUpRowTsx3(){const{visibleSharedValue,withDelay,withSequence,withTiming,Easing}=this.__closure;return{transform:[{translateY:visibleSharedValue.get()?withDelay(115,withSequence(withTiming(8,{duration:150,easing:Easing.inOut(Easing.ease)}),withTiming(0,{duration:300,easing:Easing.out(Easing.ease)}))):0}]};}"
};
export default function ExploreServersRow(props) {
  let setState;
  const visible = props.visible;
  setState = void 0;
  const r10 = styles();
  const sharedValue = useSharedValue(false);
  useEffect(() => {
    if (visible ? sharedValue.get() !== visible : visible) {
      setTimeout(() => {
        sharedValue.set(true);
      }, 500);
    }
  }, [visible, sharedValue]);
  let loading;
  [loading, setState] = useState(false);
  const callback2 = useCallback(async () => {
    let c28014_0;
    c28014_0 = void 0;
    setState(true);
    ICYMIActionCreators.itemInteracted("caught_up", "caught_up", "press_explore");
    ICYMIActionCreators.feedItemActioned({
      itemId: "caught_up",
      itemType: "caught_up",
      actionParameters: {
        actionGestureType: "press",
        actionTargetElement: "browse_servers_button",
        actionIntentType: "open",
        actionDestinationType: null
      }
    });
    await maybeFetchGuildDiscoveryCategories();
    setTimeout($mk116936(c28014_0), 100);
  }, []);
  const callback = useCallback(() => {
    ICYMIActionCreators.itemInteracted("caught_up", "caught_up", "press_home");
    ICYMIActionCreators.feedItemActioned({
      itemId: "caught_up",
      itemType: "caught_up",
      actionParameters: {
        actionGestureType: "press",
        actionTargetElement: "back_to_home_button",
        actionIntentType: "navigate",
        actionDestinationType: "guild_home"
      }
    });
    const rootNavigationRef = getRootNavigationRef();
    if (rootNavigationRef != null) {
      rootNavigationRef.navigate("tabs", {
        screen: "guilds"
      });
    }
  }, []);
  const E = function E() {
    return {
      transform: [{
        translateY: sharedValue.get() ? _timing.withTiming(0, {
          duration: 250,
          easing: _ReanimatedRexport.Easing.bezier(0.5, 1.8, 0.5, 1)
        }) : -80
      }],
      opacity: sharedValue.get() ? _timing.withTiming(1, {
        duration: 100,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.bezierFn(0.33, 1, 0.68, 1))
      }) : 0
    };
  };
  E.__closure = {
    visibleSharedValue: sharedValue,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing
  };
  E.__workletHash = 6575188656069;
  E.__initData = __initData;
  const animatedStyle3 = useAnimatedStyle(E);
  const b = function b() {
    return {
      transform: [{
        translateY: sharedValue.get() ? _ReanimatedRexport.withDelay(80, _ReanimatedRexport.withSequence(_timing.withTiming(8, {
          duration: 100,
          easing: _ReanimatedRexport.Easing.inOut(_ReanimatedRexport.Easing.ease)
        }), _timing.withTiming(0, {
          duration: 300,
          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
        }))) : 0
      }]
    };
  };
  b.__closure = {
    visibleSharedValue: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    withSequence: _ReanimatedRexport.withSequence,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing
  };
  b.__workletHash = 469742746264;
  b.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(b);
  const x = function x() {
    return {
      transform: [{
        translateY: sharedValue.get() ? _ReanimatedRexport.withDelay(115, _ReanimatedRexport.withSequence(_timing.withTiming(8, {
          duration: 150,
          easing: _ReanimatedRexport.Easing.inOut(_ReanimatedRexport.Easing.ease)
        }), _timing.withTiming(0, {
          duration: 300,
          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
        }))) : 0
      }]
    };
  };
  x.__closure = {
    visibleSharedValue: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    withSequence: _ReanimatedRexport.withSequence,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing
  };
  x.__workletHash = 14933607481025;
  x.__initData = __initData3;
  const animatedStyle = useAnimatedStyle(x);
  const token = useToken(Module712.colors.BACKGROUND_BRAND);
  return <View>
    <View style={r10.container}>
      <View style={r10.textContainer}>
        <ReanimatedRexport.View style={[r10.iconWrapper, animatedStyle3]}>
          <FlashIcon size="custom" style={r10.icon} color="background-brand" />
        </ReanimatedRexport.View>
        <AnimatedComponent variant="heading-lg/semibold" color="mobile-text-heading-primary" style={[r10.headerText, animatedStyle2]}>
          {intl.string(t.xjxffq)}
        </AnimatedComponent>
        <AnimatedComponent variant="text-md/normal" color="text-default" style={[r10.subtitleText, animatedStyle]}>
          {intl.string(t.sAApb0)}
        </AnimatedComponent>
      </View>
      <View style={r10.buttonContainer}>
        <Button size="md" text={intl.string(t.lNJYV8)} grow variant="primary" onPress={callback2} loading={loading} />
        <Button size="md" text={intl.string(t.AGrUbj)} grow variant="secondary" onPress={callback} />
      </View>
    </View>
    <Separator />
    <Module4611 style={r10.gradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={[Module689(token).alpha(0.2).hex(), Module689(token).alpha(0).hex()]} pointerEvents="none" />
  </View>;
};