import { StyleSheet, Text, TextInput , View } from 'react-native';
import { useState, useEffect } from 'react'
import Menu from './Menu'

const Edit = ({ edit, setEdit, session, setSession, showError }) => {
  const [saving, setSaving] = useState()
  const [title, setTitle] = useState(edit ? edit.title : '')
  const [content, setContent] = useState()

  const fetchNote = async () => {
    try {
      const response = await fetch(`https://apps.pruss.it/api/notes/${edit.noteId}`, {
        method: 'GET', headers: { 'Cookie': session.cookies },
      })
      const { content } = await response.json()
      setContent(content)
    } catch(e) {
      showError('Error while fetching note')
      setEdit(null)
    }
  }

  const saveNote = async () => {
    try {
      setSaving(true)
      await fetch(`https://apps.pruss.it/api/notes/${edit._id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'plain/text; charset=utf-8', 'Cookie': session.cookies },
        body: JSON.stringify({ title, noteId: edit.noteId, content })
      })
      setSaving(false)
      setEdit(null)
    } catch(e) {
      showError('Error while saving note')
      setSaving(false)
      setEdit(null)
    }
  }

  createNote = async () => {
    try {
      setSaving(true)
      await fetch(`https://apps.pruss.it/api/notes`, {
        method: 'POST',
        headers: { 'Content-Type': 'plain/text; charset=utf-8', 'Cookie': session.cookies },
        body: JSON.stringify({ title, content })
      })
      setSaving(false)
      setEdit(null)
    } catch(e) {
      showError('Error while saving note')
      setSaving(false)
      setEdit(null)
    }
  }

  useEffect(() => {
    if (edit?._id) {
      fetchNote()
    } else {
      setContent('')
    }
  }, [])

  return (
    <>
      <Menu
        session={session}
        setSession={setSession}
        showError={showError}
        setEdit={setEdit}
        saveNote={edit._id ? saveNote : createNote}
      />
      {
        content === undefined || saving
          ? <Text style={styles.text}>{saving ? 'Saving...' : 'Loading...'}</Text>
          : (
            <View style={styles.container}>
              <TextInput
                placeholder="Title"
                placeholderTextColor="#BBB"
                style={styles.title}
                value={title}
                onChange={e => setTitle(e.nativeEvent.text)}
              />
              <TextInput
                placeholder="Content"
                placeholderTextColor="#BBB"
                multiline={true}
                textAlignVertical="top"
                style={styles.content}
                value={content}
                onChange={e => setContent(e.nativeEvent.text)}
              />
            </View>
          )
      }
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    marginBottom: 50,
  },
  title: {
    color: 'white',
    borderBottomColor: 'white',
    borderBottomWidth: 1,
    paddingBottom: 15,
    marginBottom: 10,
    fontWeight: 'bold',
  },
  content: {
    color: 'white',
    flexGrow: 1,
    paddingVertical: 10,
  },
  text: {
    padding: 15,
    color: 'white',
  }
});

export default Edit