import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import styled from "styled-components";
import {useNavigation} from "@react-navigation/native";
import {useSelector} from "react-redux";


const GoToGalleryButton = styled.TouchableOpacity`
    width: 60px;
    border: 1px;
    
    align-items: center;
    justify-content: center;
    
    flex: 2
`;

const GoToSelectOrTakePhotoButton = styled.TouchableOpacity`
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 15px solid green;
`;

const Main = () => {
    const navigation = useNavigation();

    const goToGallery = () => {
        navigation.navigate('Gallery');
    };

    const goToSelectOrTakePhoto = () => {
        navigation.navigate('SelectOrTakePhotoStackNavigation');
    };


    const {me} = useSelector(state => state.user);


    return (
        <>
            <View style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <GoToGalleryButton title={'갤러리로 가보자'} onPress={goToGallery}>
                    <Text>갤러리로 가보자</Text>
                </GoToGalleryButton>
                <View style={{
                    flex: 8,
                    flexDirection: 'row'
                }}>
                    <Text style={{
                        width: '100%',
                        flex: 1,
                        backgroundColor: 'red'
                    }}>메인페이지</Text>
                    <Text style={{
                        width: '100%',
                        flex: 1,
                        backgroundColor: 'grey',
                    }}>메인페이지2</Text>
                    <GoToSelectOrTakePhotoButton onPress={goToSelectOrTakePhoto}/>
                </View>
            </View>
        </>
    )
};

export default Main;