// Metro module 11440 (f11441).
import { useState, useEffect, useCallback, memo } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import EmojiStore from "../../emojis/EmojiStore";
import ChannelStore from "../../../stores/ChannelStore";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import { Routes } from "../../../Constants";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useChannelName from "../../channel/useChannelName";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import * as _native from "../../../design/void/native";
import { Icon } from "../../../design/void/native";
import Module10990 from "../../../_bundle/Module10990";
import FastImage from "../../../components_native/common/FastImage";
import AvatarUtils from "../../../utils/AvatarUtils";
import UnicodeEmojis from "../../emojis/UnicodeEmojis";
import { useMemberActionsForChannel, useNextMemberAction, useAllActionsCompleted } from "../MemberActionUtils";
import { NewMemberActionTypes, CHANNEL_ACTION_BANNER_HEIGHT } from "../GuildOnboardingHomeTypes";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import Module11442 from "../../../_bundle/Module11442";
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
import { transitionTo } from "../../routing/router_utils";
import Module6684 from "../../../_bundle/Module6684";
import { useCanSeeOnboardingHome } from "../OnboardingHomeUtils";
let useStyles, ChannelActionEmoji, __initData, __initData2, MemberActionChatInputBanner, Component;
const ActionChannelInfo = function ActionChannelInfo(props) {
  const action = props.action;
  const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(action.channelId));
  const channelName = useChannelName(stateFromStores2, true);
  return <Text {...stateFromStores2 == null ? {
    variant: "text-xxs/normal",
    color: "text-default",
    children: intl.format(t.MkzlDL, {
      channelName: intl.string(t.J90oLW)
    })
  } : {
    variant: "text-xxs/normal",
    color: "text-default",
    children: intl.format(t.MkzlDL, {
      channelName
    })
  }} />;
};
ChannelActionEmoji = function ChannelActionEmoji(props) {
  const emoji = props.emoji;
  const styles2 = useStyles();
  const r29 = <View style={styles2.emojiPlaceholder}>
    <Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
  </View>;
  const id = emoji?.id;
  const name = emoji?.name;
  const stateFromStores2 = useStateFromStores([EmojiStore], () => id != null ? EmojiStore.getCustomEmojiById(id) : null, [id]);
  return stateFromStores2 != null ? <FastImage style={styles2.emoji} source={{
    uri: AvatarUtils.getEmojiURL({
      id: stateFromStores2.id,
      animated: stateFromStores2.animated,
      size: EMOJI_URL_BASE_SIZE
    })
  }} resizeMode="contain" /> : name != null ? UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(name, false)) != null ? <Text style={styles2.textEmoji} variant="heading-lg/normal">{name}</Text> : r29 : r29;
};
MemberActionChatInputBanner = function MemberActionChatInputBanner(props) {
  let c18841_6, state, setState, state2, setState2, sharedValue, sharedValue2;
  const channel = props.channel;
  c18841_6 = void 0;
  state = void 0;
  setState = void 0;
  state2 = void 0;
  setState2 = void 0;
  sharedValue = void 0;
  sharedValue2 = void 0;
  const styles = useStyles();
  const memberActionsForChannel = useMemberActionsForChannel(channel.guild_id, channel);
  const { channelAction, completed } = memberActionsForChannel;
  const nextMemberAction = useNextMemberAction(channel.guild_id, channelAction?.channelId);
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const isViewAction = channelAction?.actionType === NewMemberActionTypes.VIEW;
  c18841_6 = isViewAction;
  [state, setState] = useState(CHANNEL_ACTION_BANNER_HEIGHT);
  [state2, setState2] = useState(CHANNEL_ACTION_BANNER_HEIGHT);
  sharedValue = useSharedValue(0);
  sharedValue2 = useSharedValue(completed ? state2 : 0);
  useEffect(() => {
    if (!completed && !c18841_6) {
      sharedValue.set(state);
    } else {
      sharedValue.set(0);
    }
  }, [sharedValue, completed, isViewAction, state]);
  useEffect(() => {
    if (completed && nextMemberAction != null) {
      sharedValue2.set(state2);
    } else {
      sharedValue2.set(0);
    }
  }, [sharedValue2, completed, nextMemberAction, state2]);
  const G = function G() {
    let r25;
    const r4 = {
      height: null
    };
    if (stateFromStores) {
      r4.height = sharedValue.get();
      r25 = r4;
    } else {
      r4.height = _ReanimatedRexport.withDelay(completed ? 800 : 200, _timing.withTiming(sharedValue.get(), {
        duration: 400,
        easing: _native.DECELERATED_EASING
      }));
      r25 = r4;
    }
    return r25;
  };
  G.__closure = {
    useReducedMotion: stateFromStores,
    height: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    completed,
    withTiming: _timing.withTiming,
    DECELERATED_EASING: _native.DECELERATED_EASING
  };
  G.__workletHash = 5585837927201;
  G.__initData = __initData;
  const animatedStyle = useAnimatedStyle(G);
  const B = function B() {
    let r26;
    const r5 = {
      height: null
    };
    if (stateFromStores) {
      r5.height = sharedValue2.get();
      r26 = r5;
    } else {
      r5.height = _ReanimatedRexport.withDelay(c18841_6 ? 0 : completed ? 1200 : 0, _timing.withTiming(sharedValue2.get(), {
        duration: 400,
        easing: _native.DECELERATED_EASING
      }));
      r26 = r5;
    }
    return r26;
  };
  B.__closure = {
    useReducedMotion: stateFromStores,
    nextHeight: sharedValue2,
    withDelay: _ReanimatedRexport.withDelay,
    isViewAction,
    completed,
    withTiming: _timing.withTiming,
    DECELERATED_EASING: _native.DECELERATED_EASING
  };
  B.__workletHash = 10256555667281;
  B.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(B);
  const callback = useCallback((a0) => {
    setState(a0.nativeEvent.layout.height);
  }, [setState]);
  const callback2 = useCallback((a0) => {
    setState2(a0.nativeEvent.layout.height);
  }, [setState2]);
  if (channelAction == null) {
    return null;
  }
  const renderAction = function renderAction() {
    let r1 = null;
    if (channelAction != null) {
      const r21 = [<ChannelActionEmoji emoji={channelAction.emoji} />, <View style={styles.text}>
        <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.wrap}>{channelAction.title}</Text>
        <Text variant="text-xxs/normal" color="text-muted">
          {intl.string(t["ElGg8+"])}
        </Text>
      </View>, ,];
      let r44 = completed;
      if (completed) {
        r44 = <Icon disableColor size={Icon.Sizes.MEDIUM} source={Module11442} />;
      }
      r21[2] = r44;
      r1 = <View style={styles.container}>{r21}</View>;
    }
    return r1;
  };
  const r127 = [<View style={styles.measurement} onLayout={callback}>
    {renderAction()}
  </View>, isViewAction ? !isViewAction : <ReanimatedRexport.View style={[styles.animatedContainer, animatedStyle]}>
    {renderAction()}
  </ReanimatedRexport.View>, ,];
  let r136 = null;
  if (completed) {
    const r137 = nextMemberAction != null;
    r136 = null;
    if (r137) {
      const renderNextAction = function renderNextAction() {
        return nextMemberAction != null ? <PressableHighlight accessibilityRole="button" accessibilityLabel={intl.string(t.PDTjLN)} style={styles.container} onPress={() => transitionTo(Routes.CHANNEL(channel.guild_id, nextMemberAction.channelId))}>
          <ChannelActionEmoji emoji={nextMemberAction.emoji} />
          <View style={styles.text}>
            <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.wrap}>
              {intl.format(t["/beONw"], {
                step: nextMemberAction.title
              })}
            </Text>
            <ActionChannelInfo action={nextMemberAction} />
          </View>
          <View style={styles.circle}>
            <Icon size={Icon.Sizes.REFRESH_SMALL_16} style={styles.icon} source={Module6684} />
          </View>
        </PressableHighlight> : null;
      };
      r136 = <>
        <View style={styles.measurement} onLayout={callback2}>
          {renderNextAction()}
        </View>
        <ReanimatedRexport.View style={[styles.animatedContainer, animatedStyle2]}>
          {renderNextAction()}
        </ReanimatedRexport.View>
      </>;
    }
  }
  r127[2] = r136;
  return <>{r127}</>;
};
useStyles = createStyles({
  animatedContainer: {
    overflow: "hidden"
  },
  measurement: {
    opacity: 0,
    position: "absolute"
  },
  container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    paddingHorizontal: 12,
    paddingVertical: 8
  },
  text: {
    flexGrow: 1,
    flexShrink: 1,
    marginLeft: 8
  },
  wrap: {
    flexShrink: 1,
    flexWrap: "wrap"
  },
  emoji: {
    width: 24,
    height: 24
  },
  textEmoji: {
    width: 24,
    textAlign: "center"
  },
  emojiPlaceholder: {
    width: 24,
    height: 24,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.md,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  circle: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: 20,
    width: 20,
    borderRadius: 15,
    marginLeft: 8,
    backgroundColor: Module712.colors.BACKGROUND_BRAND
  },
  icon: {
    tintColor: Module712.colors.WHITE
  }
});
__initData = {
  code: "function MemberActionChatInputBannerTsx1(){const{useReducedMotion,height,withDelay,completed,withTiming,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:height.get()};}return{height:withDelay(completed?800:200,withTiming(height.get(),{duration:400,easing:DECELERATED_EASING}))};}"
};
__initData2 = {
  code: "function MemberActionChatInputBannerTsx2(){const{useReducedMotion,nextHeight,withDelay,isViewAction,completed,withTiming,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:nextHeight.get()};}return{height:withDelay(!isViewAction&&completed?1200:0,withTiming(nextHeight.get(),{duration:400,easing:DECELERATED_EASING}))};}"
};
Component = memo(function({ channel: channel2 }) {
  const canSeeOnboardingHome = useCanSeeOnboardingHome(channel2.guild_id);
  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(channel2.guild_id)?.isPending === true);
  return useAllActionsCompleted(channel2.guild_id) ? null : stateFromStores2 ? null : canSeeOnboardingHome ? <MemberActionChatInputBanner channel={channel2} /> : null;
});
const r84 = memo(function({ channel: channel3 }) {
  let r27;
  const memberActionsForChannel = useMemberActionsForChannel(channel3.guild_id, channel3);
  const { channelAction: channelAction2, completed: completed2 } = memberActionsForChannel;
  const nextMemberAction2 = useNextMemberAction(channel3.guild_id, channelAction2?.channelId);
  const actionType = channelAction2?.actionType;
  L8: {
    if (actionType === NewMemberActionTypes.VIEW) {
      r27 = null;
      if (!completed2) {
        break L8;
      }
      r27 = nextMemberAction2 != null ? <Component channel={channel3} /> : null;
    } else {
      r27 = <Component channel={channel3} />;
    }
  }
  return r27;
});
export { Component as MemberActionChatInputBannerGuarded };
export { r84 as MemberActionsChatInputBannerGuardedOuter };