discord-decomp/modules/parent_tools/native/ConnectGuardianCard.tsx

// Metro module 13912 (f13913).
import { useCallback } from "react";
import { View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { FAMILY_CENTER_REQUEST_QR_CODE_URL } from "../FamilyCenterConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useCountdown from "../../../hooks/useCountdown";
import useRefreshLinkCodeOnExpiry from "../hooks/useRefreshLinkCodeOnExpiry";
import { shareGuardianConnectLink } from "./shareGuardianConnectLink";
import { copy } from "../../../utils/ClipboardUtils.native";
import { presentLinkCopied } from "../../toast/native/ToastUtils";
import { intl, t } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { QRCodeWithOverlay } from "../../../components_native/QRCode";
import { Text } from "../../../design/components/Text/native/Text";
import { getTimeFormat } from "../../../utils/native/TimeUtils";
import { Button } from "../../../design/components/Button/native/Button.native";
import { ShareIcon } from "../../../design/components/Icon/native/redesign/generated/ShareIcon";
import { ButtonGroup } from "../../../design/components/ButtonGroup/native/ButtonGroup.native";
const useStyles = createStyles({
  container: {
    paddingHorizontal: Module712.space.PX_16
  },
  compactContainer: {
    alignSelf: "center",
    gap: Module712.space.PX_16
  },
  card: {
    alignSelf: "center",
    padding: Module712.space.PX_12,
    borderWidth: 1,
    borderRadius: Module712.radii.lg,
    borderColor: Module712.colors.BORDER_NORMAL
  },
  countdown: {
    textAlign: "center"
  },
  divider: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_8
  },
  compactDividerFlush: {
    paddingHorizontal: 0
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: Module712.colors.BORDER_NORMAL
  },
  dividerText: {
    marginHorizontal: Module712.space.PX_8
  },
  buttonGroup: {
    paddingTop: 0
  }
});
export function ConnectGuardianCard(props) {
  let r173;
  let id;
  const { linkCode, expiresAt, onRefresh, shareActions = "none" } = props;
  id = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  id = stateFromStores?.id;
  const countdown = useCountdown(expiresAt);
  const { days, hours, minutes, seconds } = countdown;
  useRefreshLinkCodeOnExpiry(expiresAt, onRefresh);
  const callback2 = useCallback(() => {
    if (stateFromStores != null && linkCode !== "") {
      shareGuardianConnectLink(stateFromStores, linkCode);
    }
  }, [stateFromStores, linkCode]);
  const callback = useCallback(() => {
    if (id != null && linkCode !== "") {
      copy(FAMILY_CENTER_REQUEST_QR_CODE_URL(id, linkCode), presentLinkCopied);
    }
  }, [id, linkCode]);
  if (id == null) {
    return null;
  }
  const r97 = <View style={styles.card}>
    <Stack align="center" spacing={Module712.space.PX_8}>
      <QRCodeWithOverlay size={160} text={FAMILY_CENTER_REQUEST_QR_CODE_URL(id, linkCode)} />
      <Text style={styles.countdown} variant="text-xs/normal">
        {`${intl.string(FamilyCenter_messages.RfkLDs)} ${getTimeFormat(86400 * days + 3600 * hours + 60 * minutes + seconds)}`}
      </Text>
    </Stack>
  </View>;
  if (shareActions === "none") {
    return r97;
  }
  const r100 = shareActions === "compact";
  const r126 = <View style={[styles.divider, r100 && styles.compactDividerFlush]}>
    <View style={styles.dividerLine} />
    <Text style={styles.dividerText} variant="text-sm/medium" color="text-muted">
      {intl.string(r100 ? FamilyCenter_messages.XhROZk : FamilyCenter_messages.lggBOi)}
    </Text>
    <View style={styles.dividerLine} />
  </View>;
  if (r100) {
    r173 = <View style={styles.compactContainer}>
      {r97}
      {r126}
      <Button variant="secondary" size="md" text={intl.string(t.Ej3B3Y)} icon={<ShareIcon size="md" color={Module712.colors.CONTROL_SECONDARY_TEXT_DEFAULT} />} disabled={linkCode === ""} onPress={callback2} />
    </View>;
  } else {
    const text = intl.string(t.Ej3B3Y);
    const disabled = linkCode === "";
    r173 = <Stack spacing={Module712.space.PX_32} style={styles.container}>
      {r97}
      {r126}
      <ButtonGroup style={styles.buttonGroup}>
        <Button variant="secondary" size="md" text={text} disabled={disabled} onPress={callback2} />
        <Button variant="secondary" size="md" text={intl.string(t.WqhZss)} disabled={disabled} onPress={callback} />
      </ButtonGroup>
    </Stack>;
  }
  return r173;
}