/* @flow strict-local */
import React, { PureComponent } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';

import type { User } from '../types';
import { UserAvatarWithPresence, ComponentList, RawLabel } from '../common';
import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
import ActivityText from '../title/ActivityText';
import { getMediumAvatar } from '../utils/avatar';
import { nowInTimeZone } from '../utils/date';
import styles from '../styles';

const componentStyles = StyleSheet.create({
  componentListItem: {
    alignItems: 'center',
  },
  statusWrapper: {
    justifyContent: 'center',
    flexDirection: 'row',
  },
});

type Props = {|
  user: User,
|};

export default class AccountDetails extends PureComponent<Props, void> {
  render() {
    const { user } = this.props;
    const screenWidth = Dimensions.get('window').width;

    return (
      <View>
        <UserAvatarWithPresence
          avatarUrl={typeof user.avatar_url === 'string' ? getMediumAvatar(user.avatar_url) : null}
          email={user.email}
          size={screenWidth}
          shape="square"
        />
        <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
          <View style={componentStyles.statusWrapper}>
            <PresenceStatusIndicator email={user.email} hideIfOffline={false} />
            <RawLabel style={[styles.largerText, styles.halfMarginLeft]} text={user.email} />
          </View>
          <View>
            <ActivityText style={styles.largerText} email={user.email} />
          </View>
          {user.timezone ? (
            <View>
              <RawLabel
                style={styles.largerText}
                text={`${nowInTimeZone(user.timezone)} Local time`}
              />
            </View>
          ) : null}
        </ComponentList>
      </View>
    );
  }
}

@@ -124,16 +124,55 @@
 native';
+%0Aimport %7B connect %7D from 'react-redux';
 %0A%0Aimport
@@ -178,16 +178,29 @@
 t type %7B
+ GlobalState,
  User %7D 
@@ -293,16 +293,64 @@
 ommon';%0A
+import %7B getCurrentRealm %7D from '../selectors';%0A
 import P
@@ -476,27 +476,29 @@
 rt %7B get
-MediumAvata
+AvatarFromUse
 r %7D from
@@ -796,16 +796,33 @@
 ps = %7B%7C%0A
+  realm: string,%0A
   user: 
@@ -836,23 +836,8 @@
 %7D;%0A%0A
-export default 
 clas
@@ -914,16 +914,23 @@
  const %7B
+ realm,
  user %7D 
@@ -1083,85 +1083,51 @@
 rl=%7B
-typeof user.avatar_url === 'string' ? getMediumAvatar(user.avatar_url) : null
+getAvatarFromUser(user, realm, screenWidth)
 %7D%0A  
@@ -1949,8 +1949,113 @@
 ;%0A  %7D%0A%7D%0A
+%0Aexport default connect((state: GlobalState) =%3E (%7B%0A  realm: getCurrentRealm(state),%0A%7D))(AccountDetails);%0A

Use common helper `getAvatarFromUser`.