//in App.js file
import './App.css';
import {useState} from 'react';
import {Tasks} from './Tasks'
let globalCount = 0
function App(props){
	const [task,setTask] = useState('')
	const [todos,setTodos] = useState([])

	function addTodo(){
		const newTask ={name:task,id:globalCount++,completed:false}
		setTodos([...todos,newTask])
	}

	function deleteTask(id){

		setTodos(todos.filter((item)=>id!==item.id))

	}

	function updateTask(id){
		setTodos(
			todos.map((item)=>{
				if(item.id == id){
					return {...item,completed:true}
				}else{
					return item
				}
			})
			)
	}
	return(
		<div className="App" style={{marginTop: "20px"}} >
		<input type="text" style={{width:"200px",padding:"5px"}} onChange={(event)=>setTask(event.target.value)} />
		<button onClick={addTodo} style={{padding:"5px"}}>Add Task</button>
		{todos.map((item)=><Tasks task={item.name} id={item.id} delete={deleteTask} update={updateTask} completed={item.completed}/>)}
		</div>
	)
}

export default App;

//in Tasks.js file
export const Tasks =(props)=>{
	return (
	<div>
		<li style={{fontWeight:props.completed?"bold":null}}>
			{props.task}
		</li>
		<button onClick = {()=>props.delete(props.id)}>Delete</button>
		<button onClick = {()=>props.update(props.id)}>Update</button>
	</div>
	)
}