// Metro module 10201 (f10202).
import { useMemo } from "react";
import { View } from "react-native";
import { createChannelRecordFromInvite } from "../../../records/ChannelRecord";
import RelationshipStore from "../../../stores/RelationshipStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { getSimpleChannelIconComponent } from "../../../utils/native/ChannelUtils";
import { TextIcon } from "../../../design/components/Icon/native/redesign/generated/TextIcon";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { Text } from "../../../design/components/Text/native/Text";
import { computeChannelName } from "../../channel/useChannelName";
import { ClockIcon } from "../../../design/components/Icon/native/redesign/generated/ClockIcon";
import { intl, t } from "../../../intl/index.native";
import CountDown from "../../../components_native/common/CountDown";
let useStyles;
const InstantInviteDetails = function InstantInviteDetails(props) {
  const { channel, expiresAt } = props;
  const styles = useStyles();
  let Component = getSimpleChannelIconComponent(channel);
  if (Component == null) {
    Component = TextIcon;
  }
  return <Stack>
    <Stack direction="horizontal" align="center">
      <Component color="icon-subtle" size="xs" />
      <Text variant="text-md/semibold" color="text-subtle" style={styles.channel} lineClamp={1}>
        {computeChannelName(channel, UserStore, RelationshipStore, false)}
      </Text>
    </Stack>
    {expiresAt != null && <Stack direction="horizontal" align="center">
      <ClockIcon size="xs" color="icon-subtle" />
      <Text variant="text-md/semibold" color="text-subtle">
        {intl.string(t.aTABYx)}
      </Text>
      <CountDown style={styles.time} deadline={expiresAt} />
    </Stack>}
  </Stack>;
};
useStyles = createStyles({
  flex: {
    flex: 1
  },
  channel: {
    flex: 0
  },
  time: {
    color: Module712.colors.TEXT_FEEDBACK_POSITIVE
  }
});
export default function InstantInviteCode(props) {
  const invite = props.invite;
  return <View style={useStyles().flex}>
    <Stack>
      <Text variant="text-lg/bold" tabularNumbers>{invite.code}</Text>
      <InstantInviteDetails channel={useMemo(() => createChannelRecordFromInvite(invite.channel), [invite.channel])} expiresAt={invite.getExpiresAt()} />
    </Stack>
  </View>;
};
export { InstantInviteDetails };