import React, {useEffect, useState, useRef} from 'react';
import * as MediaLibrary from 'expo-media-library';
import * as Permission from 'expo-permissions';
import {Image, ImageBackground, ScrollView, View, Text, TouchableOpacity} from "react-native";
import {useNavigation} from '@react-navigation/native';
import LoadingComponent from "../components/LoadingComponent";
import screen from '../constants/layout';
import { Camera } from 'expo-camera';
import styled from "styled-components";
import {MaterialCommunityIcons} from "@expo/vector-icons";

const TakePhotoButton = styled.TouchableOpacity`
    width: 70px;
    height: 70px;
    border-radius: 50px;
    border: 15px solid green;
`;


const TakePhoto = (props) => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(false);
    const [hasPermission, setHasPermission] = useState(false);
    const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
    const [canTakePhoto, setCanTakePhoto] = useState(true);
    const cameraRef = useRef(null);


    const askPermission = async () => {
        try {
            setLoading(true);
            const {status} = await Permission.askAsync(Permission.CAMERA);
            console.log(status);
            if (status === 'granted') {
                setHasPermission(true);
            }
        } catch (e) {
            console.error(e);
            setHasPermission(false);
        } finally {
            setLoading(false)
        }
    };

    const changeCameraType = () => {
        if (cameraType === Camera.Constants.Type.front) {
            setCameraType(Camera.Constants.Type.back);
        } else {
            setCameraType(Camera.Constants.Type.front);
        }
    };

    const takePhoto = async () => {
        if (!canTakePhoto) {
            return
        }
        try {
            setCanTakePhoto(false);
            const {uri} = await cameraRef.current.takePictureAsync({quality: 1});
            const asset = await MediaLibrary.createAssetAsync(uri);
            navigation.navigate('UploadPhoto', {photo: asset});
        } catch (e) {
            console.error(e);
            setCanTakePhoto(true);
        }
    };

    const goUpload = () => {
        navigation.navigate('UploadPhoto');
    };

    useEffect(() => {
        askPermission();
    }, []);

    return (
        <View style={{alignItems: 'center'}}>
            {loading
                ? <LoadingComponent/>
                : hasPermission ?
                    <View>
                        <Camera
                            ref={cameraRef}
                            type={cameraType}
                            style={{
                                justifyContent: 'flex-end',
                                padding: 10,
                                width: screen.width,
                                height: screen.height / 2
                            }}>
                            <TouchableOpacity onPress={changeCameraType}>
                                <MaterialCommunityIcons color={'green'} name={'camera'} size={24}/>
                            </TouchableOpacity>
                        </Camera>
                        <TakePhotoButton
                            onPress={takePhoto}
                            disabled={!canTakePhoto}
                        />
                        <TakePhotoButton
                            onPress={goUpload}
                        />
                    </View>
                    :
                    null
            }
        </View>
    )
};

export default TakePhoto;