// Metro module 8460 (f8461).
import { useCallback } from "react";
import { View } from "react-native";
import LocaleStore from "../../../user_settings/LocaleStore";
import AuthenticationStore from "../../../../stores/AuthenticationStore";
import GuildMemberStore from "../../../../stores/GuildMemberStore";
import { getBadgeTooltip } from "../../../guild_badge/GuildBadgeConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { getEstablishedDate } from "../../GuildProfileUtils";
import SnowflakeUtils from "../../../../utils/SnowflakeUtils";
import { fromGuildProfile } from "../../../../utils/GuildRecordUtils";
import { getGuildTraits } from "../../../guild_badge/GuildTraits";
import { getBadgeCategory } from "../../../guild_badge/BadgeCategory";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import { transitionToGuild } from "../../../routing/transitionToGuild.native";
import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
import GuildBadgeV2 from "../../../guild/native/GuildBadgeV2";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  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"
  },
  members: {
    display: "flex",
    flexDirection: "row",
    gap: 8
  },
  memberCount: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 4
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: Module712.colors.TEXT_STATUS_OFFLINE
  },
  dotOnline: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: Module712.colors.TEXT_STATUS_ONLINE
  },
  established: {
    display: "flex"
  },
  nameRow: {
    marginTop: 4,
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  guildName: {
    flexShrink: 1
  },
  guildIcon: {
    marginLeft: 8,
    height: 24,
    width: 24
  }
});
export default function GuildProfileHeader(props) {
  let id, stateFromStores;
  const { profile, guildIconSource } = props;
  id = void 0;
  stateFromStores = void 0;
  const styles = useStyles();
  const stateFromStores2 = useStateFromStores([LocaleStore], () => LocaleStore.locale);
  const establishedDate = getEstablishedDate(SnowflakeUtils.extractTimestamp(profile.id), stateFromStores2);
  const guild = fromGuildProfile(profile);
  const callback = useCallback(() => {
    const guildTraits = getGuildTraits(fromGuildProfile(profile));
    const badgeTooltip = getBadgeTooltip(getBadgeCategory(guildTraits), guildTraits.visibility);
    const tooltipTitle = badgeTooltip.tooltipTitle;
    let tooltipSubtitle = badgeTooltip.tooltipSubtitle;
    if (!(tooltipTitle == null && tooltipSubtitle == null)) {
      if (tooltipSubtitle == null) {
        tooltipSubtitle = tooltipTitle;
      }
      ToastActionCreators.open({
        key: "guild-badge-tooltip",
        content: tooltipSubtitle
      });
    }
  }, [profile]);
  id = profile.id;
  stateFromStores = useStateFromStores([GuildMemberStore, AuthenticationStore], () => GuildMemberStore.getMember(id, AuthenticationStore.getId())?.joinedAt != null, [id]);
  const callback2 = useCallback(() => {
    if (stateFromStores) {
      ActionSheetActionCreators.hideActionSheet(`GuildProfileActionSheet:${id}`);
      transitionToGuild(id);
    }
  }, [id, stateFromStores]);
  return <View style={styles.header}>
    <View style={styles.avatarBackground}>
      <GuildIcon icon={guildIconSource} size={GuildIconSizes.XXLARGE} animate value={profile.name} selected={false} />
    </View>
    <View style={styles.nameRow}>
      <Text onPress={stateFromStores ? callback2 : void 0} style={styles.guildName} accessibilityRole="header" variant="heading-xl/semibold" color="mobile-text-heading-primary" lineClamp={1}>{profile.name}</Text>
      <PressableHighlight onPress={callback}>
        <GuildBadgeV2 guild={guild} style={styles.guildIcon} />
      </PressableHighlight>
    </View>
    <View style={styles.members}>
      <View style={styles.memberCount}>
        <View style={styles.dotOnline} />
        <Text variant="text-md/medium" color="text-default">
          {intl.format(t["LC+S+m"], {
            membersOnline: profile.onlineCount
          })}
        </Text>
      </View>
      <View style={styles.memberCount}>
        <View style={styles.dot} />
        <Text variant="text-md/medium" color="text-default">
          {intl.format(t.zRl6XR, {
            count: profile.memberCount
          })}
        </Text>
      </View>
    </View>
    <View style={styles.established}>
      <Text variant="text-md/medium" color="text-muted">
        {intl.format(t.zb2Q56, {
          createdAtDate: establishedDate
        })}
      </Text>
    </View>
  </View>;
};
export { useStyles };