1import {
2  Button,
3  Image,
4  Heading,
5  Text,
6  Divider,
7  Row,
8  Spacer,
9  View,
10  UserIcon,
11  scale,
12} from 'expo-dev-client-components';
13import * as React from 'react';
14import { useWindowDimensions } from 'react-native';
15
16import { SafeAreaTop } from '../components/SafeAreaTop';
17import { useBuildInfo } from '../providers/BuildInfoProvider';
18import { useUser } from '../providers/UserContextProvider';
19import { Avatar } from './Avatar';
20
21export function AppHeader({ navigation }) {
22  const buildInfo = useBuildInfo();
23  const { width } = useWindowDimensions();
24  const { appName, appIcon } = buildInfo;
25
26  const { userData, selectedAccount } = useUser();
27
28  const onUserProfilePress = () => {
29    navigation.navigate('User Profile');
30  };
31
32  const isAuthenticated = userData != null;
33  const selectedUserImage = selectedAccount?.ownerUserActor?.profilePhoto ?? null;
34
35  return (
36    <>
37      <View
38        bg="default"
39        pt="small"
40        pb="small"
41        style={{ paddingHorizontal: width > 650 ? scale[14] : 0 }}>
42        <SafeAreaTop />
43        <Row align="center">
44          <Spacer.Horizontal size="medium" />
45          <View flex="1" shrink="1">
46            <Row align="center">
47              <View height="xl" width="xl" rounded="large" bg="secondary">
48                {Boolean(appIcon) && <Image size="xl" rounded="large" source={{ uri: appIcon }} />}
49              </View>
50
51              <Spacer.Horizontal size="small" />
52
53              <View flex="1">
54                <Heading weight="semibold" numberOfLines={1}>
55                  {appName}
56                </Heading>
57                <Text size="small" color="secondary">
58                  Development Build
59                </Text>
60              </View>
61            </Row>
62          </View>
63
64          <View align="centered" style={{ justifyContent: 'flex-end' }}>
65            <Button.HighlightOnPressContainer
66              onPress={onUserProfilePress}
67              accessibilityLabel="Navigate to User Profile"
68              bg="ghost"
69              rounded="full">
70              <View>
71                {isAuthenticated ? (
72                  <View rounded="full" padding="small">
73                    <Avatar
74                      profilePhoto={selectedUserImage}
75                      name={
76                        selectedAccount?.ownerUserActor?.fullName
77                          ? selectedAccount.ownerUserActor.fullName
78                          : selectedAccount?.name
79                      }
80                      isOrganization={selectedAccount?.ownerUserActor === null}
81                      size="xl"
82                    />
83                  </View>
84                ) : (
85                  <View mx="small">
86                    <View bg="default" rounded="full" padding="tiny">
87                      <UserIcon />
88                    </View>
89                  </View>
90                )}
91              </View>
92            </Button.HighlightOnPressContainer>
93          </View>
94        </Row>
95      </View>
96      <Divider weight="thin" />
97    </>
98  );
99}
100