import React, { useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, Animated, TouchableWithoutFeedback } from "react-native";

import colors from "../config/colors";
import ActionButton from 'react-native-action-button';
import { AntDesign, Entypo } from "@expo/vector-icons";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from '@expo/vector-icons';
import DataMenu from "./DataMenu";
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { Dimensions } from "react-native";


const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get('window').height;



function FloatButton(props) {
    const animation = useRef(new Animated.Value(0)).current;
    const [open, setOpen] = useState(false);

    const toggleMenu = () => {
        const value = open ? 0 : 1;

        Animated.spring(animation, {
            toValue: value,
            friction: 6,
            useNativeDriver: true
        }).start();

        setOpen(!open);
    };
    const rotation = {
        transform: [
            {
                rotate: animation.interpolate({
                    inputRange: [0, 1],
                    outputRange: ["0deg", "0deg"],

                })
            }
        ]
    };

    const cameraStyle = {
        transform: [
            { scale: animation },
            {
                translateX: animation.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 20]
                })
            }
        ]
    }
    return (
        <View style={[styles.container]}>
            <TouchableWithoutFeedback>
                <Animated.View style={[styles.submenu, cameraStyle]}>
                    <DataMenu />
                </Animated.View>
            </TouchableWithoutFeedback>
            <View style={{ margin:35, alignSelf:"flex-end"}}>
                <TouchableWithoutFeedback onPress={toggleMenu}>
                    <Animated.View style={[styles.button, styles.menu, rotation]}>
                        <MaterialCommunityIcons name="layers-plus" size={36} color={colors.white} />
                    </Animated.View>
                </TouchableWithoutFeedback>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        alignItems: "center",
        position: "absolute",
        flex: 1,
    },
    button: {
        // position: "absolute",
        width: 50,
        height: 50,
        borderRadius: 6,
        alignItems: "center",
        shadowColor: colors.primary,
        shadowOpacity: 0.3,
        shadowOffset: {
            height: 10,
        },
        padding: 3,
    },
    menu: {
        backgroundColor: colors.primary,
    },
    submenu: {
        // position:"relative",
        width: screenWidth,
        height: screenHeight * 0.9,
        flex: 1,

    }

});

export default FloatButton;