import React, { useState, useEffect } from "react"
import { Modal, View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, KeyboardAvoidingView } from "react-native"
import { Picker } from '@react-native-picker/picker'
import { adicionaNota, atualizaNota } from '../servicos/Notas'
export default function NotaEditor({mostraNotas, notaSelecionada, setNotaSelecionada}) {
useEffect(() => {
if(notaSelecionada.id){
preencheModal()
setNotaParaAtualizar(true)
setModalVisivel(true)
return
}
setNotaParaAtualizar(false)
}, [notaSelecionada])
const [titulo, setTitulo] = useState('')
const [categoria, setCategoria] = useState("Pessoal")
const [texto, setTexto] = useState("")
const [modalVisivel, setModalVisivel] = useState(false)
const [notaParaAtualizar, setNotaParaAtualizar] = useState(false)
async function salvaNota(){
const umaNota = {
titulo: titulo,
categoria: categoria,
texto: texto,
}
await adicionaNota(umaNota)
mostraNotas()
}
async function modificaNota(){
const umaNota = {
titulo: titulo,
categoria: categoria,
texto: texto,
id: notaSelecionada.id
}
await atualizaNota(umaNota)
mostraNotas()
}
function preencheModal(){
setTitulo(notaSelecionada.titulo)
setCategoria(notaSelecionada.categoria)
setTexto(notaSelecionada.texto)
}
function limpaModal(){
setTitulo('')
setCategoria('Pessoal')
setTexto('')
setNotaSelecionada({})
setModalVisivel(false)
}
return(
<>
<Modal
animationType="slide"
transparent={true}
visible={modalVisivel}
onRequestClose={() => {setModalVisivel(false)}}
>
<KeyboardAvoidingView
behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
style={estilos.centralizaModal}
>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={estilos.modal}>
<Text style={estilos.modalTitulo}>Criar nota</Text>
<Text style={estilos.modalSubTitulo}>Título da nota</Text>
<TextInput
style={estilos.modalInput}
onChangeText={novoTitulo => setTitulo(novoTitulo)}
placeholder="Digite um título"
value={titulo}/>
<Text style={estilos.modalSubTitulo}>Categoria</Text>
<View style={estilos.modalPicker}>
<Picker
selectedValue={categoria}
onValueChange={novaCategoria => setCategoria(novaCategoria)}>
<Picker.Item label="Pessoal" value="Pessoal"/>
<Picker.Item label="Trabalho" value="Trabalho"/>
<Picker.Item label="Outros" value="Outros"/>
</Picker>
</View>
<Text style={estilos.modalSubTitulo}>Conteúdo da nota</Text>
<TextInput
style={estilos.modalInput}
multiline={true}
numberOfLines={3}
onChangeText={novoTexto => setTexto(novoTexto)}
placeholder="Digite aqui seu lembrete"
value={texto}/>
<View style={estilos.modalBotoes}>
<TouchableOpacity style={estilos.modalBotaoSalvar} onPress={() => {
notaParaAtualizar ? modificaNota() : salvaNota()}}>
<Text style={estilos.modalBotaoTexto}>Salvar</Text>
</TouchableOpacity>
<TouchableOpacity style={estilos.modalBotaoCancelar} onPress={() => {limpaModal()}}>
<Text style={estilos.modalBotaoTexto}>Cancelar</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</Modal>
<TouchableOpacity onPress={() => {setModalVisivel(true)}} style={estilos.adicionarMemo}>
<Text style={estilos.adicionarMemoTexto}>+</Text>
</TouchableOpacity>
</>
)
}