// Metro module 15422 (f15423).
import * as Module19 from "react";
import { useEffect, useMemo } from "react";
import { Image as Image2, View } from "react-native";
import GuildPopoutStore from "../../../guild_profile/GuildPopoutStore";
import GuildStore from "../../../../stores/GuildStore";
import { GUILD_FEED_CARD_MARGIN_HORIZONTAL, GUILD_FEED_MIN_BANNER_HEIGHT } from "../GuildFeedConstants";
import { GuildFeatures } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import useTheme from "../../../../hooks/useTheme";
import { fetchGuildForPopout } from "../../../guild_profile/GuildPopoutActionCreators";
import { isAndroid } from "../../../../utils/PlatformUtils";
import AvatarUtils from "../../../../utils/AvatarUtils";
import { getGuildBadgeSource } from "../../../guild/native/GuildBadge";
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
import { timingSlow } from "../../../../design/animation/reanimated/timing/timingPresets";
import { useStateFromStoresObject, useStateFromStores } from "../../../../_bundle/Module589";
import useIsWindowLarge from "../../../screen/native/useIsWindowLarge";
import { useDrawerWidth } from "../../../screen/native/drawer/useDrawerWidth";
import { isThemeDark } from "../../../../design/shared";
import Module15424 from "../../../../_bundle/Module15424";
import Module15425 from "../../../../_bundle/Module15425";
import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import { Icon } from "../../../../design/void/native";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import { intl, t } from "../../../../intl/index.native";
import Module15426 from "../../../../_bundle/Module15426";
let useStyles, __initData;
const GuildFeedBanner = function GuildFeedBanner(props) {
  let c21984_2, width, height, drawerWidth;
  const guild = props.guild;
  let description = props.description;
  const { hideDescription, hideMemberCount } = props;
  c21984_2 = void 0;
  width = void 0;
  height = void 0;
  drawerWidth = void 0;
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  const G = () => ({
    opacity: sharedValue.get()
  });
  G.__closure = {
    opacity: sharedValue
  };
  G.__workletHash = 10872399645496;
  G.__initData = __initData;
  const animatedStyle = useAnimatedStyle(G);
  const height2 = Math.max(0.22 * useWindowDimensions_native().height, GUILD_FEED_MIN_BANNER_HEIGHT);
  const theme = useTheme();
  useEffect(() => {
    fetchGuildForPopout(guild.id);
  }, [guild]);
  const memo = useMemo(() => {
    const r8 = guild.features.has(GuildFeatures.ANIMATED_BANNER) && !isAndroid();
    const r20 = guild.banner != null ? AvatarUtils.getGuildBannerSource({
      id: guild.id,
      banner: guild.banner
    }, r8) : null;
    return guild != null ? guild.homeHeader != null ? AvatarUtils.getGuildHomeHeaderSource({
      id: guild.id,
      homeHeader: guild.homeHeader
    }) : r20 : r20;
  }, [guild]);
  const name = guild.name;
  if (description == null) {
    description = guild.description;
  }
  if (hideDescription) {
    description = void 0;
  }
  const handleLoad = function handleLoad() {
    sharedValue.set(withTiming(1, timingSlow));
  };
  const guildBadgeSource = getGuildBadgeSource(guild);
  const discoverableGuild = useStateFromStoresObject([GuildPopoutStore], () => ({
    discoverableGuild: GuildPopoutStore.getGuild(guild.id)
  }), [guild]).discoverableGuild;
  const isWindowLarge = useIsWindowLarge();
  c21984_2 = isWindowLarge;
  const windowDimensions_native = useWindowDimensions_native();
  width = windowDimensions_native.width;
  height = windowDimensions_native.height;
  drawerWidth = useDrawerWidth();
  const memo2 = useMemo(() => {
    const r8 = Math.min(width, height);
    if (c21984_2) {
      return Math.min(Math.max(width, height) - drawerWidth, r8);
    }
    return r8 - 2 * GUILD_FEED_CARD_MARGIN_HORIZONTAL;
  }, [width, height, isWindowLarge, drawerWidth]);
  const r102 = [<Image2 {...memo != null ? {
    style: [{
      height: height2,
      width: "100%"
    }, animatedStyle],
    source: memo,
    onLoad: handleLoad
  } : {
    style: [{
      height: height2,
      width: "100%"
    }, animatedStyle],
    source: isThemeDark(theme) ? Module15424 : Module15425,
    onLoad: handleLoad
  }} />, ,];
  r102[1] = <View style={[styles.headerContainer, styles.headerBorder]}>
    <View style={[styles.content, {
      width: memo2,
      marginTop: -32
    }]}>
      <View style={styles.guildIconContainer}>
        <GuildIcon style={styles.avatar} guild={guild} size={GuildIconSizes.XLARGE} animate />
      </View>
      <View style={styles.textContainer}>
        <Text lineClamp={1} variant="heading-xl/extrabold" color="mobile-text-heading-primary" style={styles.title}>{name}</Text>
        {guildBadgeSource != null ? <Icon style={styles.icon} source={guildBadgeSource} disableColor /> : null}
      </View>
      {description != null ? <Text style={styles.description} variant="text-sm/medium" color="text-default">{description}</Text> : null}
      {discoverableGuild != null && !hideMemberCount && <View style={styles.memberInfo}>
        {discoverableGuild.features.has(GuildFeatures.DISCOVERABLE) ? <PressableOpacity style={styles.publicInfo} accessibilityRole="button" onPress={() => {
          ToastActionCreators.open({
            key: "DISCOVERABLE_GUILD_HEADER_PUBLIC_INFO",
            content: intl.string(t.O8lDI2)
          });
        }}>
          <Icon style={styles.publicIcon} source={Module15426} />
          <Text variant="text-xs/medium" color="text-default">
            {intl.string(t["B/vjCu"])}
          </Text>
        </PressableOpacity> : null}
        {discoverableGuild.presenceCount != null ? discoverableGuild.memberCount != null ? <>
          <View style={styles.dotOnline} />
          <Text variant="text-xs/medium" color="text-default">
            {intl.format(t.QCNv6P, {
              online: discoverableGuild.presenceCount,
              offline: discoverableGuild.memberCount
            })}
          </Text>
        </> : null : null}
      </View>}
    </View>
  </View>;
  return <View style={styles.container}>{r102}</View>;
};
useStyles = createStyles({
  avatar: {
    borderRadius: Module712.radii.lg,
    height: 64,
    width: 64
  },
  container: {
    paddingBottom: 24,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  description: {
    marginTop: 4
  },
  textContainer: {
    marginTop: GUILD_FEED_CARD_MARGIN_HORIZONTAL,
    alignItems: "center",
    flexDirection: "row"
  },
  content: {
    width: "100%"
  },
  icon: {
    marginLeft: 8
  },
  headerContainer: {
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  headerBorder: {
    borderTopRightRadius: Module712.radii.lg,
    borderTopLeftRadius: Module712.radii.lg,
    marginTop: -16
  },
  guildIconContainer: {
    padding: 4,
    borderRadius: Module712.radii.lg,
    alignSelf: "flex-start",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  dotOnline: {
    width: 4,
    height: 4,
    borderRadius: Module712.radii.xs,
    marginRight: 4,
    backgroundColor: Module712.unsafe_rawColors.GREEN_360
  },
  publicInfo: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 12
  },
  publicIcon: {
    marginRight: 4,
    width: 14,
    height: 14
  },
  memberInfo: {
    marginTop: 4,
    flexDirection: "row",
    alignItems: "center"
  },
  title: {
    maxWidth: "90%"
  }
});
__initData = {
  code: "function GuildFeedBannerTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
};
const r93 = Module19.memo(function GuildFeedBannerContainer(props) {
  const { guildId, description, hideDescription, hideMemberCount } = props;
  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  return stateFromStores != null ? <GuildFeedBanner guild={stateFromStores} description={description} hideDescription={hideDescription} hideMemberCount={hideMemberCount} /> : null;
});
export default r93;