import React, { useRef, useEffect, useState } from 'react';
import { StyleSheet, View, ScrollView, Text, Animated, TouchableOpacity, Image } from 'react-native';

import { useHeaderHeight } from '@react-navigation/stack';
//dependencies\
//components
import { AddItemButton, PushItemsToStorageButton, RemoveItemsButton, AddNewRecipeButton } from '../../components/groceryComponents/GroceryListButtons';
import { ListedItem } from '../../components/groceryComponents/ListedItem';

//redux

import { useSelector } from 'react-redux';

//themes
import { COLORS } from '../../themes/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const AnimButtons = () => {
  const [toggle, setToggle] = useState(0); // toggle for sub-buttons
  const yValue = useRef(new Animated.Value(0)).current; // animation start value

  //animation:
  useEffect(() => {
    toggle ? Animated.spring(yValue,
      {
        toValue: 1,
        friction: 5,
        useNativeDriver: true,
      }
    ).start() :
      Animated.timing(yValue,
        {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }
      ).start()

  }, [toggle])
  //components
  return (
    <View style={styles.buttonsView} >

      <Animated.View style={{
        position: 'absolute',
        transform: [{
          translateY: yValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, -65]
          })
        }],
      }}>
        {/* top button */}

        <RemoveItemsButton />

      </Animated.View>

      <Animated.View style={{
        position: 'absolute',
        transform: [{
          translateY: yValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, -130]
          })
        }],
      }}>
        {/* middle button */}

        <PushItemsToStorageButton />

      </Animated.View>

      <Animated.View style={{
        position: 'absolute',
        transform: [{
          translateX: yValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 70]
          })
        }],
      }}>
        {/* bottom button */}

        <AddNewRecipeButton />

      </Animated.View>

      {/* Button to toggle sub-buttons */}
      <TouchableOpacity style={{ width: 60, height: 60, borderRadius: 60 / 2, backgroundColor: COLORS.primary, alignItems: 'center', justifyContent: 'center' }}
        onPress={() => toggle ? setToggle(0) : setToggle(1)}>
        <MaterialCommunityIcons name="view-headline" color={COLORS.dp00} size={40} />
      </TouchableOpacity>
    </View>
  );
}



function GroceryList() {
  const items = useSelector(state => state.items);

  const itemList = items.map((item, index) => {
    return <ListedItem key={index} id={item.productId} />
  });
  return (
    <View style={[styles.container]}>
      {/* Scroll */}
      <ScrollView>
        <View style={{ height: useHeaderHeight() }} />
        <View style=
          {{
            top: 5,
          }}>
          {itemList}
        </View>
        <View style={{ height: 500 }}></View>
      </ScrollView>


      {/* buttons */}
      <View style={styles.itemLocation} >
        <AddItemButton />

      </View>
      <AnimButtons />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonsView: {
    flexDirection: 'row',
    position: 'absolute',
    alignItems: 'flex-start',
    left: 8,
    bottom: 10,
    //backgroundColor: 'red',
  },
  itemLocation: {
    position: 'absolute',
    right: 8,
    bottom: 10,
  }
});
export default GroceryList;