// Metro module 15363 (f15364).
import { useMemo, useCallback } from "react";
import { View } from "react-native";
import ChannelStore from "../../../stores/ChannelStore";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import GuildStore from "../../../stores/GuildStore";
import { DEFAULT_ROLE_COLOR_HEX } from "../../../Constants";
import { createICYMIStyles } from "./createICYMIStyles";
import Module712 from "../../../_bundle/Module712";
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import { useFontScale } from "../../screen/native/useFontScale";
import { useStateFromStores } from "../../../_bundle/Module589";
import useDisplayNameStyles from "../../display_name_styles/hooks/useDisplayNameStyles";
import { useDisplayNameStylesFont } from "../../display_name_styles/native/useDisplayNameStylesFont";
import { useName } from "../../../utils/NicknameUtils";
import { Text } from "../../../design/components/Text/native/Text";
import useChannelName from "../../channel/useChannelName";
import { getIconForChannel } from "./util/getIconForChannel";
import { intl, t } from "../../../intl/index.native";
import { TextIcon } from "../../../design/components/Icon/native/redesign/generated/TextIcon";
import { openDetailsActionSheet } from "./util/openDetailsActionSheet";
import { PressableHighlight, PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { getRelativeTimestamp } from "../../notification_center/NotificationCenterUtils";
import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
let styles;
const CutoutGuildIconWithUserCustom = function CutoutGuildIconWithUserCustom(props) {
  const { guild, author } = props;
  return <View style={{
    width: 40,
    height: 40
  }}>
    <ClipView cutouts={[{
      shape: CutoutShape.Circle,
      x: 18,
      y: 18,
      size: 24
    }]}>
      <GuildIcon guild={guild} size={GuildIconSizes.SMALL_32} />
    </ClipView>
    <Avatar animate style={styles().authorAvatar} guildId={guild.id} user={author} size={AvatarSizes.XSMALL_20} />
  </View>;
};
styles = createICYMIStyles((a0) => ({
  container: {
    marginTop: a0.margin
  },
  content: {
    flex: 1,
    overflow: "hidden"
  },
  channelNameAndAccessory: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingBottom: Module712.space.PX_4,
    marginHorizontal: a0.margin
  },
  channelNameAndAccessoryLarge: {
    flexDirection: "column",
    paddingBottom: Module712.space.PX_4,
    marginHorizontal: a0.margin
  },
  header: {
    flexDirection: "row",
    flexGrow: 1
  },
  headerInfo: {
    flexGrow: 1,
    flexShrink: 1,
    marginLeft: Module712.space.PX_12
  },
  title: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 2
  },
  titleLeft: {
    flexShrink: 1,
    flexGrow: 0,
    flexDirection: "row",
    alignItems: "center",
    gap: 6
  },
  subTitleContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderRadius: Module712.radii.sm
  },
  subtitle: {
    flexShrink: 1,
    flexGrow: 0,
    width: "100%"
  },
  genContentSubtitle: {
    flexDirection: "row",
    alignItems: "center",
    gap: 2
  },
  genContentSubtitleChannel: {
    flexDirection: "row",
    alignItems: "center",
    gap: 2,
    flex: 1
  },
  subtitleTrailing: {
    paddingVertical: 1
  },
  separator: {
    height: 1,
    width: "100%",
    backgroundColor: Module712.colors.BORDER_SUBTLE
  },
  normalContent: {
    borderBottomWidth: 1,
    borderBottomColor: Module712.colors.BORDER_STRONG,
    flexShrink: 0
  },
  authorAvatar: {
    position: "absolute",
    right: 0,
    bottom: 0
  }
}));
export default function ICYMICardInCard(props) {
  let guildId, stateFromStores2, stateFromStores3, displayNameStylesFont, name, children;
  const { children: children2, message, actionLabel, timestamp, id, interactionType, onHeaderPress, onHeaderLongPress, channelId, guildId: guildId2, hideTimestamp = false, shouldFeatureUser = false } = props;
  let c21906_6 = shouldFeatureUser;
  guildId = void 0;
  stateFromStores2 = void 0;
  stateFromStores3 = void 0;
  displayNameStylesFont = void 0;
  name = void 0;
  children = void 0;
  const r10 = styles();
  let c21906_7 = r10;
  const fontScale = useFontScale();
  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]);
  let r30 = stateFromStores?.guild_id;
  if (r30 == null) {
    r30 = guildId2;
  }
  guildId = r30;
  stateFromStores2 = useStateFromStores([GuildStore], () => guildId != null ? GuildStore.getGuild(guildId) : null, [guildId]);
  stateFromStores3 = useStateFromStores([GuildMemberStore], () => c21906_6 ? guildId != null ? (message == null ? void 0 : message.author.id) != null ? GuildMemberStore.getMember(guildId, message.author.id) : null : null : null, [shouldFeatureUser, guildId, message]);
  displayNameStylesFont = useDisplayNameStylesFont({
    displayNameStyles: useDisplayNameStyles({
      userId: message == null ? void 0 : message.author?.id
    })
  });
  const name2 = useName(guildId, stateFromStores?.id, message?.author);
  name = shouldFeatureUser ? message?.author != null ? guildId != null ? stateFromStores != null ? name2 : null : null : null : null;
  const memo = useMemo(() => stateFromStores2 == null ? null : c21906_6 ? message?.author != null ? <CutoutGuildIconWithUserCustom guild={stateFromStores2} author={message.author} /> : <GuildIcon guild={stateFromStores2} size={GuildIconSizes.NORMAL} /> : <GuildIcon guild={stateFromStores2} size={GuildIconSizes.NORMAL} />, [stateFromStores2, shouldFeatureUser, message?.author]);
  const memo2 = useMemo(() => stateFromStores2 != null ? <Text key={stateFromStores2.id} style={{
    maxWidth: 225
  }} lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{stateFromStores2.name}</Text> : null, [stateFromStores2]);
  children = useChannelName(stateFromStores);
  const memo3 = useMemo(() => {
    if (c21906_6 && message?.author != null && guildId != null && stateFromStores != null && name != null) {
      let color = stateFromStores3?.colorString;
      if (color == null) {
        color = DEFAULT_ROLE_COLOR_HEX;
      }
      const IconForChannel = getIconForChannel(stateFromStores);
      return <View style={c21906_7.genContentSubtitle}>
        <Text variant="text-sm/semibold" style={[{
          color
        }, displayNameStylesFont != null ? {
          fontFamily: displayNameStylesFont
        } : void 0]}>
          {name.length > 20 ? `${name.slice(0, 17)}...` : name}
        </Text>
        <Text variant="text-sm/medium" color="text-default">
          {intl.string(t.CHUAYk)}
        </Text>
        <View style={c21906_7.genContentSubtitleChannel}>
          <IconForChannel size="xs" color="text-default" />
          <Text variant="text-sm/medium" color="text-default" onPress={onHeaderPress} style={{
            flex: 1
          }} lineClamp={1} ellipsizeMode="tail">{children}</Text>
        </View>
      </View>;
    }
    const Component = stateFromStores != null ? getIconForChannel(stateFromStores) : TextIcon;
    return <View style={c21906_7.genContentSubtitle}>
      <Text variant="text-sm/medium" color="text-default">{actionLabel}</Text>
      {stateFromStores != null ? <>
        <Text variant="text-sm/medium" color="text-default">
          {intl.string(t.CHUAYk)}
        </Text>
        <View style={c21906_7.genContentSubtitleChannel}>
          <Component size="xs" color="text-default" />
          <Text variant="text-sm/medium" color="text-default" onPress={onHeaderPress} style={{
            flex: 1
          }} lineClamp={1} ellipsizeMode="tail">{children}</Text>
        </View>
      </> : null}
    </View>;
  }, [shouldFeatureUser, message?.author, guildId, stateFromStores, children, name, stateFromStores3, displayNameStylesFont, r10.genContentSubtitle, r10.genContentSubtitleChannel, onHeaderPress, actionLabel]);
  const callback = useCallback(() => {
    if (stateFromStores2 != null && stateFromStores != null) {
      openDetailsActionSheet({
        guildId: stateFromStores2.id,
        channelId: stateFromStores.id,
        id,
        type: interactionType
      });
    }
  }, [stateFromStores2, stateFromStores, id, interactionType]);
  return <View style={r10.container}>
    <PressableHighlight onPress={onHeaderPress} onLongPress={onHeaderLongPress} style={r10.content}>
      <View style={useMemo(() => fontScale > 1.8 ? c21906_7.channelNameAndAccessoryLarge : c21906_7.channelNameAndAccessory, [fontScale, r10.channelNameAndAccessoryLarge, r10.channelNameAndAccessory])}>
        <View style={r10.header}>
          {memo}
          <View style={r10.headerInfo}>
            <View style={r10.title}>
              <View style={r10.titleLeft}>
                {memo2}
                {hideTimestamp ? !hideTimestamp : <Text lineClamp={1} variant="text-xs/normal" color="text-muted">
                  {getRelativeTimestamp(timestamp)}
                </Text>}
              </View>
              <PressableOpacity onPress={callback} style={r10.subtitleTrailing} hitSlop={8}>
                <MoreHorizontalIcon color={Module712.colors.ICON_MUTED} size="sm" />
              </PressableOpacity>
            </View>
            <View style={r10.subTitleContainer}>
              <View style={r10.subtitle}>{memo3}</View>
            </View>
          </View>
        </View>
      </View>
    </PressableHighlight>
    <View style={r10.normalContent}>{children2}</View>
  </View>;
};