1import { ChevronDownIcon } from '@expo/styleguide-native';
2import { useNavigation } from '@react-navigation/native';
3import { StackNavigationProp } from '@react-navigation/stack';
4import { Divider, Row, View, Text, useExpoTheme } from 'expo-dev-client-components';
5import React, { Fragment } from 'react';
6import { TouchableOpacity } from 'react-native-gesture-handler';
7
8import { BranchListItem } from '../../components/BranchListItem';
9import { SectionHeader } from '../../components/SectionHeader';
10import { WebContainerProjectPage_Query } from '../../graphql/types';
11import { HomeStackRoutes } from '../../navigation/Navigation.types';
12
13type ProjectPageApp = WebContainerProjectPage_Query['app']['byId'];
14
15export function EASUpdateLaunchSection({ app }: { app: ProjectPageApp }) {
16  const branchesToRender = app.updateBranches.filter(
17    (updateBranch) => updateBranch.updates.length > 0
18  );
19
20  const branchManifests = branchesToRender.slice(0, 3).map((branch) => ({
21    name: branch.name,
22    id: branch.id,
23    latestUpdate: branch.updates[0],
24  }));
25
26  const theme = useExpoTheme();
27  const navigation = useNavigation<StackNavigationProp<HomeStackRoutes>>();
28
29  function onSeeAllBranchesPress() {
30    navigation.navigate('Branches', { appId: app.id });
31  }
32
33  return (
34    <View>
35      <SectionHeader header="Branches" style={{ paddingTop: 0 }} />
36      {branchManifests.map((branch, i) => {
37        return (
38          <Fragment key={branch.id}>
39            <BranchListItem
40              first={i === 0}
41              last={i === branchesToRender.length - 1}
42              appId={app.id}
43              name={branch.name}
44              latestUpdate={branch.latestUpdate}
45            />
46            {i < branchManifests.length - 1 && <Divider style={{ height: 1 }} />}
47          </Fragment>
48        );
49      })}
50      {branchesToRender.length > 3 && (
51        <View border="default" roundedBottom="large">
52          <TouchableOpacity onPress={onSeeAllBranchesPress}>
53            <View padding="medium" bg="default" roundedBottom="large">
54              <Row align="center" justify="between">
55                <Text type="InterRegular">See all branches</Text>
56                <ChevronDownIcon
57                  style={{ transform: [{ rotate: '-90deg' }] }}
58                  color={theme.icon.secondary}
59                />
60              </Row>
61            </View>
62          </TouchableOpacity>
63        </View>
64      )}
65    </View>
66  );
67}
68