import { StyleSheet, Text, View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Menu = ({ session, setSession, setEdit, showError, saveNote }) => {
  const logout = async () => {
    try {
      await AsyncStorage.clear();
      setSession(null)
    } catch(e) {
      showError('Error while logging out')
    }
  }

  return (
    <View style={styles.menu}>
      {
        saveNote
          ? (
            <>
              <Text
                style={styles.menuText}
                onPress={() => setEdit(null)}
              >
                Back
              </Text>
              <Text
                style={styles.menuText}
                onPress={saveNote}
              >
                Save
              </Text>
            </>
          ) : (
            <>
              <Text
                style={styles.menuText}
                onPress={() => setEdit({})}
              >
                New Note
              </Text>
              <Text style={styles.menuText}>{session.email}</Text>
              <Text
                style={styles.menuText}
                onPress={logout}
              >
                Logout
              </Text>
            </>
          )
      }
    </View>
  )
}

const styles = StyleSheet.create({
  menu: {
    backgroundColor: 'lightgrey',
    height: 60,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    padding: 10,
  },
  menuText: {
    fontWeight: 'bold',
    paddingHorizontal: 15,
  },
});

export default Menu