page.tsx

import React, { useState, useeffect, useEffect } from 'react'
import { StyleSheet, View, Alert } from 'react-native'

import { Header } from '../components/Header'
import { Task, TasksList } from '../components/TasksList'
import { TodoInput } from '../components/TodoInput'
import Asyncstorage from '@react-native-async-storage/async-storage'
import AsyncStorage from '@react-native-async-storage/async-storage'

export interface INewTitle {
  taskId: number
  newTitle: string
}

export function Home() {
  const [tasks, setTasks] = useState<Task[]>([])
  const dataKey = '@todo:transactions'

  async function handleAddTask(newTaskTitle: string) {
    const newTask = {
      id: new Date().getTime(),
      title: newTaskTitle,
      done: false,
    }

    try {
      const data = await AsyncStorage.getItem(dataKey)
      const currentData = data ? JSON.parse(data) : []

      const dataFormatted = [...currentData, newTask]

      await AsyncStorage.setItem(dataKey, JSON.stringify(dataFormatted))
    } catch (error) {
      console.log(error)
      Alert.alert('error')
    }

    const sameTitle = tasks.find((item) => item.title === newTaskTitle)
    if (sameTitle) {
      return Alert.alert('Atenção', 'Esse título já existe')
    }
    setTasks((oldTasks) => [...oldTasks, newTask])
  }

  function handleToggleTaskDone(id: number) {
    const updatedTasks = tasks.map((task) => ({ ...task }))
    const foundItem = updatedTasks.find((item) => item.id === id)
    if (!foundItem) return

    foundItem.done = !foundItem.done
    setTasks(updatedTasks)
  }

  function handleEditTask({ taskId, newTitle }: INewTitle) {
    const updatedTasks = tasks.map((task) => ({ ...task }))
    const foundItem = updatedTasks.find((item) => item.id === taskId)
    if (!foundItem) return

    foundItem.title = newTitle

    setTasks(updatedTasks)
  }
  function handleRemoveTask(id: number) {
    const taskCancel = tasks.filter((task) => task.id !== id)

    return Alert.alert(
      'Remover item',
      'Tem certeza que você deseja remover esse item?',
      [
        { style: 'cancel', text: 'não', onPress: () => {} },
        {
          text: 'sim',
          onPress: () => {
            setTasks(taskCancel)
          },
        },
      ]
    )
  }

  useEffect(() => {
    async function loadData() {
      const data = await AsyncStorage.getItem(dataKey)
      console.log(JSON.parse(data!))
    }
    loadData()
    // async function removeAll() {
    //   await AsyncStorage.removeItem(dataKey)
    // }
    // removeAll()
  }, [])

  return (
    <>
      <View style={styles.container}>
        <Header tasksCounter={tasks.length} />

        <TodoInput addTask={handleAddTask} />

        <TasksList
          tasks={tasks}
          toggleTaskDone={handleToggleTaskDone}
          removeTask={handleRemoveTask}
          editTask={handleEditTask}
        />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EBEBEB',
  },
})