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        />
38        <View style={styles.spacer} />
39        <ImageTestView
40          style={styles.image}
41          imageProps={imageProps}
42          ImageComponent={getSelectedCompareComponent()}
43        />
44      </View>
45    </TouchableOpacity>
46  );
47}
48
49const styles = StyleSheet.create({
50  container: {
51    height: 160,
52    paddingHorizontal: 10,
53    paddingVertical: 5,
54    backgroundColor: 'white',
55    borderBottomColor: Colors.border,
56    borderBottomWidth: StyleSheet.hairlineWidth,
57  },
58  header: {
59    height: 32,
60    flexDirection: 'row',
61    alignItems: 'center',
62  },
63  title: {
64    fontSize: 15,
65    color: Colors.disabled,
66  },
67  content: {
68    flex: 1,
69    flexDirection: 'row',
70    justifyContent: 'space-around',
71    alignItems: 'center',
72  },
73  spacer: {
74    width: 10,
75  },
76  image: {
77    width: (Dimensions.get('window').width - 30) / 2,
78    height: 160 - 10 - 32,
79  },
80});
81