// Metro module 8962 (f8963).
import { useEffect } from "react";
import { View } from "react-native";
import ApplicationStore from "../../applications/ApplicationStore";
import AuthenticationStore from "../../../stores/AuthenticationStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useTheme from "../../../hooks/useTheme";
import { useStateFromStores } from "../../../_bundle/Module589";
import Platforms from "../../../lib/Platforms";
import AvatarUtils, { makeSource } from "../../../utils/AvatarUtils";
import * as _shared from "../../../design/shared";
import ApplicationActionCreators from "../../applications/ApplicationActionCreators";
import { Avatar, AvatarSizes, Icon } from "../../../design/void/native";
import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import authorizeConnection_native from "../../connections/authorizeConnection.native";
import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
import { CheckmarkLargeIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeIcon";
const useStyles = createStyles({
  container: {
    flexDirection: "column",
    gap: 16,
    width: "100%"
  },
  header: {
    flexDirection: "column",
    alignItems: "center",
    gap: 8,
    marginBottom: 8
  },
  headerIcons: {
    flexDirection: "row",
    alignItems: "center",
    gap: 16,
    marginBottom: 8
  },
  card: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    padding: 16,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderColor: Module712.colors.BORDER_SUBTLE,
    borderWidth: 1,
    borderRadius: Module712.radii.md
  },
  cardName: {
    flex: 1,
    minWidth: 0
  },
  cardInfo: {
    flex: 1,
    minWidth: 0,
    flexDirection: "column",
    gap: 2
  },
  platformIcon: {
    width: 40,
    height: 40,
    borderRadius: Module712.radii.sm
  },
  platformIconSmall: {
    width: 32,
    height: 32,
    borderRadius: Module712.radii.sm
  },
  infoNotice: {
    flexDirection: "row",
    alignItems: "flex-start",
    gap: 8,
    padding: 12,
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_INFO,
    borderColor: Module712.colors.ICON_FEEDBACK_INFO,
    borderWidth: 1,
    borderRadius: Module712.radii.sm
  },
  infoText: {
    flex: 1
  },
  divider: {
    height: 1,
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    marginVertical: 8
  }
});
export default function ConnectAccountStep(props) {
  const { clientId, platformType, platformName } = props;
  const styles = useStyles();
  const theme = useTheme();
  const stateFromStores = useStateFromStores([ApplicationStore], () => ApplicationStore.getApplication(clientId), [clientId]);
  const stateFromStores2 = useStateFromStores([AuthenticationStore, UserStore], () => AuthenticationStore.getId() != null ? UserStore.getCurrentUser() : null);
  const r10 = Platforms.get(platformType);
  const r1 = r10 != null;
  let source = null;
  if (r1) {
    const isThemeLight = _shared.isThemeLight(theme);
    const icon = r10.icon;
    source = makeSource(isThemeLight ? icon.lightPNG : icon.darkPNG);
  }
  const source3 = stateFromStores != null ? AvatarUtils.getApplicationIconSource({
    id: stateFromStores.id,
    icon: stateFromStores.icon
  }) : void 0;
  const source2 = stateFromStores2 != null ? AvatarUtils.getUserAvatarSource(stateFromStores2) : void 0;
  let applicationName = stateFromStores?.name;
  if (applicationName == null) {
    applicationName = "";
  }
  useEffect(() => {
    ApplicationActionCreators.fetchApplication(clientId);
  }, [clientId]);
  return <View style={styles.container}>
    <View style={styles.header}>
      <View style={styles.headerIcons}>
        <Avatar source={source3} size={AvatarSizes.XLARGE} />
        <MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} size="md" />
        <Avatar source={source2} size={AvatarSizes.XLARGE} />
      </View>
      <Text variant="text-lg/normal" color="text-default">
        {intl.string(t.uT1CPa)}
      </Text>
      <Text variant="heading-xl/semibold" color="mobile-text-heading-primary">{applicationName}</Text>
    </View>
    <Text variant="text-sm/normal" color="text-default">
      {intl.format(t["aJRE/Q"], {
        applicationName,
        platformName
      })}
    </Text>
    <View style={styles.card}>
      {source != null ? <Icon source={source} style={styles.platformIcon} disableColor /> : null}
      <Text variant="text-md/medium" style={styles.cardName} color="text-default">{platformName}</Text>
      <Button variant="primary" size="sm" onPress={function onPress() {
        authorizeConnection_native({
          platformType,
          location: "OAuth2 Connect Account Step"
        });
      }} text={intl.string(t.S0W8Z5)} />
    </View>
    <View style={styles.infoNotice}>
      <CircleInformationIcon color={Module712.colors.ICON_FEEDBACK_INFO} size="sm" />
      <Text variant="text-sm/normal" color="text-default" style={styles.infoText}>
        {intl.format(t["8psEFX"], {
          platformName,
          applicationName
        })}
      </Text>
    </View>
  </View>;
};
export function ConnectedAccountCard(props) {
  const { platformType: platformType2, platformName, connectedAccount, applicationName } = props;
  const styles = useStyles();
  const theme = useTheme();
  const r6 = Platforms.get(platformType2);
  const r1 = r6 != null;
  let source = null;
  if (r1) {
    const isThemeLight = _shared.isThemeLight(theme);
    const icon = r6.icon;
    source = makeSource(isThemeLight ? icon.lightPNG : icon.darkPNG);
  }
  return <View style={styles.container}>
    <Text variant="text-sm/normal" color="text-default">
      {intl.format(t["+oaRw3"], {
        platformName
      })}
    </Text>
    <View style={styles.card}>
      {source != null ? <Icon source={source} style={styles.platformIconSmall} disableColor /> : null}
      <View style={styles.cardInfo}>
        <Text variant="text-md/medium" color="mobile-text-heading-primary">{connectedAccount.name}</Text>
        <Text variant="text-xs/normal" color="text-muted">
          {intl.format(t.Dkd7sE, {
            platformName,
            connectedAccountId: connectedAccount.id
          })}
        </Text>
      </View>
      <CheckmarkLargeIcon color={Module712.colors.TEXT_FEEDBACK_POSITIVE} size="sm" />
    </View>
    <Text variant="text-sm/normal" color="text-default">
      {intl.format(t.pyRNXJ, {
        applicationName
      })}
    </Text>
    <View style={styles.divider} />
  </View>;
}