// Metro module 15387 (f15388).
import _asyncToGenerator from "../../../_bundle/_asyncToGenerator";
import { useMemo, useCallback, useState } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import GuildStore from "../../../stores/GuildStore";
import ICYMIStore from "../ICYMIStore";
import { GuildFeatures, AnalyticsPages, AnalyticsSections, AnalyticsObjects } from "../../../Constants";
import { jsx } from "react/jsx-runtime";
import { createICYMIStyles } from "./createICYMIStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import AvatarUtils from "../../../utils/AvatarUtils";
import { fromClientDiscoverableGuild } from "../../../utils/GuildRecordUtils";
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
import FastImage from "../../../components_native/common/FastImage";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import ICYMIActionCreators from "../ICYMIActionCreators";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { intl, t } from "../../../intl/index.native";
import GuildActionCreators from "../../../actions/GuildActionCreators";
import { Text } from "../../../design/components/Text/native/Text";
import { Button } from "../../../design/components/Button/native/Button.native";
import { Separator } from "./ICYMIShared";
import FastestList_android from "../../fastest_list/FastestList.android";
function $mk116937($env) {
  return function*() {
    let env31760 = {
      $parent: $env
    };
    env31760[1] = 0;
    env31760[2] = 0;
    const r22 = env31760.$parent;
    env31760[0] = r22;
    yield ICYMIActionCreators.reloadICYMITab();
    const r43 = env31760[0].$parent;
    yield (0, r43[1])(r43[2][17]).getGuildChannelScores();
    const r65 = env31760[0].$parent;
    (0, r65[1])(r65[2][17]).getRecommendedGuilds();
  };
}
let FeaturedServer, RecommendedGuildsRow, c10939_17;
let env10939 = {};
const CutoutGuildBanner = function CutoutGuildBanner(props) {
  const guild = props.guild;
  const r14 = c10939_17();
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const r24 = stateFromStores ? !stateFromStores : guild.features.has(GuildFeatures.ANIMATED_BANNER);
  const source = guild.banner != null ? AvatarUtils.getAnimatableSourceWithFallback(r24, (a0) => AvatarUtils.getGuildBannerSource({
    id: guild.id,
    banner: guild.banner
  }, a0)) : void 0;
  return <View style={r14.bannerImage}>
    <ClipView cutouts={[{
      shape: CutoutShape.RoundedRect,
      x: 8,
      y: 46,
      width: 56,
      height: 56,
      cornerRadius: 20
    }]}>
      {guild.banner != null ? <FastImage style={r14.bannerImage} source={source} resizeMode="cover" /> : <View style={[r14.bannerImage, r14.emptyBanner]} />}
    </ClipView>
    <GuildIcon style={r14.guildIcon} guild={useMemo(() => fromClientDiscoverableGuild(guild), [guild])} size={GuildIconSizes.LARGE} animate={!stateFromStores} />
  </View>;
};
FeaturedServer = function FeaturedServer(props) {
  let setState;
  const guild2 = props.guild;
  setState = void 0;
  const r9 = c10939_17();
  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guild2.id) != null);
  const callback = useCallback(async () => {
    let c28015_0, c28015_1;
    L14: {
      let env30874;
      c28015_1 = void 0;
      const r10 = env30874 = {
        $parent: env10939
      };
      c28015_0 = r10;
      env30874[0] = void 0;
      setState(true);
      ICYMIActionCreators.itemInteracted("recommended_guilds", "recommended_guilds", "press_join_guild");
      ICYMIActionCreators.feedItemActioned({
        itemId: guild2.id,
        itemType: "recommended_guilds",
        actionParameters: {
          actionGestureType: "press",
          actionTargetElement: "item_container",
          actionIntentType: "join",
          actionDestinationType: "guild"
        }
      });
      if (await ICYMIActionCreators.gravityJoinGuild([guild2.id], "recommended_guilds")) {
        const r69 = c28015_0;
        env30874[0] = {
          state: {
            analyticsSource: {
              page: AnalyticsPages.ICYMI,
              section: AnalyticsSections.ICYMI_RECOMMENDED_SERVERS,
              object: AnalyticsObjects.LIST_ITEM
            }
          }
        };
        ICYMIActionCreators.addedRecommendedGuild();
        ICYMIActionCreators.fetchDehydrated({
          isReloading: true,
          forceRefresh: true
        }).then((0, _asyncToGenerator)($mk116937(r69)));
        await GuildActionCreators.transitionToGuildSync(guild2.id, {
          ...env30874[0]
        });
        (0, setState)(false);
        break L14;
      }
      (0, setState)(false);
      ToastActionCreators.open({
        key: "RecommeendedServersRow",
        content: intl.string(t.CG4Hks)
      });
      return void 0;
    }
  }, [guild2.id]);
  let loading;
  [loading, setState] = useState(false);
  return <View style={r9.featuredServerContainer}>
    <CutoutGuildBanner guild={guild2} />
    <View style={r9.featuredServerInnerContainer}>
      <Text maxFontSizeMultiplier={1} lineClamp={1} style={r9.featuredServerTitle} variant="text-md/semibold" color="mobile-text-heading-primary">{guild2.name}</Text>
      <Text maxFontSizeMultiplier={1} lineClamp={3} variant="text-xs/normal" color="text-default">{guild2.description}</Text>
    </View>
    <View style={r9.buttonContainer}>
      <Button disabled={stateFromStores} loading={loading} text={stateFromStores ? intl.string(t.cEnaWx) : intl.string(t.VJlc0S)} size="sm" onPress={callback} grow />
    </View>
  </View>;
};
RecommendedGuildsRow = function RecommendedGuildsRow(props) {
  const discoverableGuilds = props.discoverableGuilds;
  const callback = useCallback((a0, a1) => {
    const guild3 = discoverableGuilds[a1];
    return guild3 != null ? (0, jsx)(FeaturedServer, {
      guild: guild3
    }) : null;
  }, [discoverableGuilds]);
  return discoverableGuilds.length !== 0 ? <FastestList_android sections={[discoverableGuilds.length]} insetStart={Module712.space.PX_16} renderItem={callback} estimatedListSize="windowSize" itemSize={200 + Module712.space.PX_16} horizontal listId="recommended-servers-list" showsHorizontalScrollIndicator={false} /> : null;
};
c10939_17 = createICYMIStyles((a0) => ({
  container: {
    marginVertical: Module712.space.PX_24
  },
  title: {
    marginBottom: Module712.space.PX_8,
    marginHorizontal: a0.margin
  },
  subtitle: {
    marginBottom: Module712.space.PX_16,
    marginHorizontal: a0.margin
  },
  featuredServerInnerContainer: {
    marginHorizontal: Module712.space.PX_12,
    marginTop: 36
  },
  buttonContainer: {
    position: "absolute",
    bottom: Module712.space.PX_12,
    left: Module712.space.PX_12,
    right: Module712.space.PX_12
  },
  featuredServerTitle: {
    marginBottom: Module712.space.PX_8
  },
  guildIcon: {
    position: "absolute",
    top: 50,
    left: 12
  },
  bannerImage: {
    height: 72,
    width: 200
  },
  emptyBanner: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  featuredServerContainer: {
    borderRadius: Module712.radii.lg,
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    height: 244,
    width: 200,
    overflow: "hidden"
  }
}));
export function ICYMIServerRecommendationRow() {
  const stateFromStoresArray = useStateFromStoresArray([ICYMIStore], () => ICYMIStore.getDiscoverableGuilds());
  const r16 = c10939_17();
  return stateFromStoresArray.length !== 0 ? <>
    <View style={r16.container}>
      <Text style={r16.title} variant="heading-lg/semibold" color="mobile-text-heading-primary">
        {intl.string(t.lv1tce)}
      </Text>
      <Text style={r16.subtitle} variant="heading-sm/normal" color="text-muted">
        {intl.string(t.x4OezN)}
      </Text>
      <RecommendedGuildsRow discoverableGuilds={stateFromStoresArray} />
    </View>
    <Separator />
  </> : null;
}