import { StyleSheet, Text, View, Pressable, Alert } from 'react-native'
import SwipeableFlatList from 'react-native-swipeable-list'
import { useState, useEffect } from 'react'
import Note from './Note'
import Menu from './Menu'

const List = ({ session, setSession, showError, setEdit }) => {
  const [list, setList] = useState()
  const [loading, setLoading] = useState(true)

  const fetchNotes = async () => {
    setLoading(true)
    try {
      const response = await fetch('https://apps.pruss.it/api/notes', { 'Cookie': session.cookies } )
      const data = await response.json()
      setList(data)
    } catch(e) {
      showError('Error while fetching notes')
    }
    setLoading(false)
  }

  useEffect(() => {
    setLoading(true)
    fetchNotes()
  }, [])

  const deleteNote = async (note) => {
    setLoading(true)
    try {
      await fetch(`https://apps.pruss.it/api/notes/${note._id}`, {
        method: 'DELETE', headers: { 'Cookie': session.cookies },
      })
      fetchNotes()
    } catch(e) {
      showError('Error while removing note')
    } finally {
      setLoading(false)
    }
  }

  const deleteItem = note => {
    Alert.alert(
      'Are you sure?',
      `Note "${note.title}" will be permanently removed`,
      [
        {
          text: 'Remove',
          onPress: () => deleteNote(note),
          style: 'destructive',
        },
        {
          text: 'Cancel',
          onPress: () => {},
          style: 'cancel',
        },
      ],
    );
  };

  const removeBtn = (note) => {
    return (
      <View style={styles.buttonsContainer}>
        <View style={styles.button}>
          <Pressable onPress={() => deleteItem(note)}>
            <Text style={styles.buttonText}>Delete</Text>
          </Pressable>
        </View>
      </View>
    );
  };

  return (
    <>
      <Menu
        session={session}
        setSession={setSession}
        showError={showError}
        setEdit={setEdit}
      />
      {
        loading || list === undefined
          ? <Text style={styles.text}>Loading notes...</Text>
          : (
            <SwipeableFlatList
              data={list.sort((a,b) => new Date(b.updated_at) - new Date(a.updated_at))}
              renderItem={({item}) => <Note note={item} setEdit={setEdit} />}
              keyExtractor={item => item._id}
              ListEmptyComponent={<Text style={styles.text}>You don't have any notes</Text>}
              onRefresh={fetchNotes}
              refreshing={loading}
              maxSwipeDistance={80}
              renderQuickActions={({item}) => removeBtn(item)}
              bounceFirstRowOnMount={false}
            />
          )
      }
    </>
  )
}

const styles = StyleSheet.create({
  text: {
    color: 'white',
    padding: 20,
  },
  menu: {
    backgroundColor: 'lightgrey',
    height: 55,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    padding: 10,
  },
  menuText: {
    fontWeight: 'bold',
    paddingHorizontal: 10,
  },
  button: {
    width: 80,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },
  buttonText: {
    fontWeight: 'bold',
    color: 'white',
  },
  buttonsContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
});

export default List;