1import * as React from 'react';
2import { SectionList, StyleSheet, Text, View } from 'react-native';
3
4import ImageTestListItem from './ImageTestListItem';
5import imageTests from './tests';
6import { ImageTest } from './types';
7import Colors from '../../constants/Colors';
8
9export default function ImageComparisonScreen() {
10  const renderItem = ({ item }: any) => {
11    const test: ImageTest = item;
12    return <ImageTestListItem test={test} />;
13  };
14
15  const renderSectionHeader = ({ section }: any) => {
16    return (
17      <View style={styles.header}>
18        <Text style={styles.title}>{section.title}</Text>
19      </View>
20    );
21  };
22
23  const keyExtractor = (item: any, index: number) => {
24    return item + index;
25  };
26
27  const sections = imageTests.tests.map((test) => ({
28    title: test.name,
29    // @ts-ignore
30    data: test.tests,
31  }));
32
33  return (
34    <View style={styles.container}>
35      <SectionList
36        style={styles.content}
37        sections={sections}
38        renderItem={renderItem}
39        renderSectionHeader={renderSectionHeader}
40        keyExtractor={keyExtractor}
41      />
42    </View>
43  );
44}
45
46const styles = StyleSheet.create({
47  container: {
48    flex: 1,
49    backgroundColor: Colors.greyBackground,
50  },
51  content: {
52    flex: 1,
53  },
54  header: {
55    backgroundColor: 'white',
56    paddingHorizontal: 10,
57    paddingTop: 10,
58    paddingBottom: 4,
59    borderBottomColor: Colors.border,
60    borderBottomWidth: StyleSheet.hairlineWidth,
61  },
62  title: {
63    fontSize: 17,
64    fontWeight: 'bold',
65  },
66});
67