1import { useState } from 'react';
2import { StatusBar } from 'expo-status-bar';
3import { StyleSheet, View } from 'react-native';
4import * as ImagePicker from 'expo-image-picker';
5
6import Button from './components/Button';
7import ImageViewer from './components/ImageViewer';
8import CircleButton from './components/CircleButton';
9import IconButton from './components/IconButton';
10import EmojiPicker from './components/EmojiPicker';
11
12const PlaceholderImage = require('./assets/images/background-image.png');
13
14export default function App() {
15  const [isModalVisible, setIsModalVisible] = useState(false);
16  const [showAppOptions, setShowAppOptions] = useState(false);
17  const [selectedImage, setSelectedImage] = useState(null);
18
19  const pickImageAsync = async () => {
20    let result = await ImagePicker.launchImageLibraryAsync({
21      allowsEditing: true,
22      quality: 1,
23    });
24
25    if (!result.canceled) {
26      setSelectedImage(result.assets[0].uri);
27      setShowAppOptions(true);
28    } else {
29      alert('You did not select any image.');
30    }
31  };
32
33  const onReset = () => {
34    setShowAppOptions(false);
35  };
36
37  const onSaveImageAsync = async () => {
38    // we will implement this later
39  };
40
41  const onAddSticker = () => {
42    setIsModalVisible(true);
43  };
44
45  const onModalClose = () => {
46    setIsModalVisible(false);
47  };
48
49
50  return (
51    <View style={styles.container}>
52      <View style={styles.imageContainer}>
53        <ImageViewer placeholderImageSource={PlaceholderImage} selectedImage={selectedImage} />
54      </View>
55      {showAppOptions ? (
56        <View style={styles.optionsContainer}>
57          <View style={styles.optionsRow}>
58            <IconButton icon="refresh" label="Reset" onPress={onReset} />
59            <CircleButton onPress={onAddSticker} />
60            <IconButton icon="save-alt" label="Save" onPress={onSaveImageAsync} />
61          </View>
62        </View>
63      ) : (
64        <View style={styles.footerContainer}>
65          <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
66          <Button
67            label="Use this photo"
68            onPress={() => setShowAppOptions(true)}
69          />
70        </View>
71      )}
72      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
73        {/* A list of emoji component will go here */}
74      </EmojiPicker>
75      <StatusBar style="auto" />
76    </View>
77  );
78}
79
80const styles = StyleSheet.create({
81  container: {
82    flex: 1,
83    backgroundColor: '#25292e',
84    alignItems: 'center',
85  },
86  imageContainer: {
87    flex:1,
88    paddingTop: 58
89  },
90  footerContainer: {
91    flex: 1 / 3,
92    alignItems: 'center',
93  },
94  optionsContainer: {
95    position: "absolute",
96    bottom: 80,
97  },
98  optionsRow: {
99    alignItems: 'center',
100    flexDirection: 'row',
101  },
102});
103