// Metro module 8456 (f8457).
import { useMemo } from "react";
import { Image as Image2, View } from "react-native";
import GuildStore from "../../../../stores/GuildStore";
import { GuildFeatures } from "../../../../Constants";
import { isThemeDark } from "../../../../design/utils/shared/themes";
import { brightenColor, darkenColor } from "../../../../_bundle/Module3901";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { fromGuildProfile } from "../../../../utils/GuildRecordUtils";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import AvatarUtils from "../../../../utils/AvatarUtils";
import getDevicePixelRatio_web from "../../../../utils/getDevicePixelRatio.web";
import useTheme from "../../../../hooks/useTheme";
import { useToken } from "../../../../design/tokens/native/useToken";
import { useProfilePrimaryColor } from "../GuildProfileUtils";
import Module4611 from "../../../../_bundle/Module4611";
import { Card } from "../../../../design/components/Card/native/Card.native";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import ServerPreviewPill from "../../../lurker_mode/native/ServerPreviewPill";
import GuildProfileHeader from "./GuildProfileHeader";
import GuildProfileGames from "./GuildProfileGames";
import GuildProfileTraits from "./GuildProfileTraits";
let useStyles, c5416_12, GuildProfileGradient, JoinForFullAccessCard;
const GuildProfileBackground = function GuildProfileBackground(props) {
  const guildProfile = props.guildProfile;
  const stateFromStores = useStateFromStores([GuildStore], () => {
    let r7 = GuildStore.getGuild(guildProfile.id);
    if (r7 == null) {
      r7 = fromGuildProfile(guildProfile);
    }
    return r7.features.has(GuildFeatures.DISCOVERABLE);
  });
  const width = useWindowDimensions_native().width;
  const styles = useStyles();
  if (stateFromStores && guildProfile.customBanner != null) {
    return <Image2 style={styles.imageBanner} source={AvatarUtils.getGuildDiscoverySplashSource({
      id: guildProfile.id,
      splash: guildProfile.customBanner,
      size: getDevicePixelRatio_web() * width
    })} />;
  }
  return <GuildProfileGradient guildProfile={guildProfile} />;
};
GuildProfileGradient = function GuildProfileGradient(props) {
  const guildProfile3 = props.guildProfile;
  const styles = useStyles();
  const theme = useTheme();
  const profilePrimaryColor = useProfilePrimaryColor(guildProfile3, useToken(Module712.colors.BACKGROUND_BASE_LOWEST));
  return <Module4611 style={styles.colorBanner} start={c5416_12.START} end={c5416_12.END} colors={[profilePrimaryColor, isThemeDark(theme) ? brightenColor(profilePrimaryColor, 0.8) : darkenColor(profilePrimaryColor, 0.8)]} />;
};
JoinForFullAccessCard = function JoinForFullAccessCard() {
  return <Card variant="secondary" border="none" style={useStyles().joinForFullAccessCard}>
    <Text variant="text-md/semibold" color="text-default">
      {intl.string(t.us0bE8)}
    </Text>
    <Text variant="text-sm/normal" color="text-muted">
      {intl.string(t.fTtTTp)}
    </Text>
  </Card>;
};
useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  colorBanner: {
    height: 140,
    width: "100%"
  },
  imageBanner: {
    height: 140,
    width: "100%",
    objectFit: "cover"
  },
  body: {
    marginTop: 12,
    paddingHorizontal: 16,
    gap: 16
  },
  error: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 8
  },
  buttonContainer: {
    marginTop: 160
  },
  header: {
    paddingHorizontal: 16,
    marginTop: -32,
    display: "flex",
    flexDirection: "column",
    gap: 0
  },
  avatarBackground: {
    width: 86,
    height: 86,
    borderRadius: 28.666666666666668,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  },
  restrictedAcronym: {
    fontSize: 24
  },
  joinForFullAccessCard: {
    gap: 4
  }
});
c5416_12 = Object.freeze({
  START: {
    x: 0,
    y: 1
  },
  END: {
    x: 1.5,
    y: 0
  }
});
export default function GuildProfileView(props) {
  const { guildProfile: guildProfile2, isLurkerServerPreview = false } = props;
  const styles = useStyles();
  return <View style={styles.container}>
    <GuildProfileBackground guildProfile={guildProfile2} />
    {isLurkerServerPreview && <ServerPreviewPill />}
    <GuildProfileHeader profile={guildProfile2} guildIconSource={useMemo(() => {
      if (guildProfile2 == null) {
        return null;
      }
      const guildIconSource = AvatarUtils.getGuildIconSource({
        id: guildProfile2.id,
        icon: guildProfile2.icon,
        size: 96,
        canAnimate: true
      });
      return typeof guildIconSource !== "number" ? guildIconSource.uri : null;
    }, [guildProfile2])} />
    <View style={styles.body}>
      {guildProfile2.description != null && guildProfile2.description.length > 0 && <Text variant="text-md/medium" color="text-subtle">{guildProfile2.description}</Text>}
      {isLurkerServerPreview ? <JoinForFullAccessCard /> : <>
        <GuildProfileGames profile={guildProfile2} />
        <GuildProfileTraits profile={guildProfile2} />
      </>}
    </View>
  </View>;
};
export function getBackgroundForProfile(a0, a1) {
  return [a1, isThemeDark(a0) ? brightenColor(a1, 0.8) : darkenColor(a1, 0.8)];
}
export { useStyles };
export { c5416_12 as DiagonalGradient };