1import { StackNavigationProp } from '@react-navigation/stack';
2import * as React from 'react';
3import { Animated, Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
4
5import { Colors } from '../../constants';
6import { getImageComponent, getSelectedCompareComponent } from './ImageComponents';
7import ImageTestView from './ImageTestView';
8import { resolveProps } from './resolveProps';
9import { ImageTest, Links } from './types';
10
11type PropsType = {
12  navigation: StackNavigationProp<Links>;
13  test: ImageTest;
14  tests: ImageTest[];
15  animValue?: Animated.Value;
16};
17
18export default function ImageTestListItem({ test, animValue, tests, navigation }: PropsType) {
19  const onPress = () => {
20    navigation.push('ImageTest', {
21      test,
22      tests,
23    });
24  };
25
26  const imageProps = resolveProps(test.props, animValue);
27  return (
28    <TouchableOpacity style={styles.container} activeOpacity={0.5} onPress={onPress}>
29      <View style={styles.header}>
30        <Text style={styles.title}>{test.name}</Text>
31      </View>
32      <View style={styles.content}>
33        <ImageTestView
34          style={styles.image}
35          imageProps={imageProps}
36          ImageComponent={getImageComponent()}
37          loadOnDemand={test.loadOnDemand}
38        />
39        <View style={styles.spacer} />
40        <ImageTestView
41          style={styles.image}
42          imageProps={imageProps}
43          ImageComponent={getSelectedCompareComponent()}
44          loadOnDemand={test.loadOnDemand}
45        />
46      </View>
47    </TouchableOpacity>
48  );
49}
50
51const styles = StyleSheet.create({
52  container: {
53    height: 160,
54    paddingHorizontal: 10,
55    paddingVertical: 5,
56    backgroundColor: 'white',
57    borderBottomColor: Colors.border,
58    borderBottomWidth: StyleSheet.hairlineWidth,
59  },
60  header: {
61    height: 32,
62    flexDirection: 'row',
63    alignItems: 'center',
64  },
65  title: {
66    fontSize: 15,
67    color: Colors.disabled,
68  },
69  content: {
70    flex: 1,
71    flexDirection: 'row',
72    justifyContent: 'space-around',
73    alignItems: 'center',
74  },
75  spacer: {
76    width: 10,
77  },
78  image: {
79    width: (Dimensions.get('window').width - 30) / 2,
80    height: 160 - 10 - 32,
81  },
82});
83