import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'
export default class App extends Component {
	//狀態(tài)在哪里，操作狀態(tài)的方法就在哪里
	//初始化狀態(tài)
	state = {todos:[
		{id:'001',name:'吃飯',done:true},
		{id:'002',name:'睡覺',done:true},
		{id:'003',name:'打代碼',done:false},
		{id:'004',name:'看書',done:false}
	]}
	//addTodo用于添加一個(gè)todo，接收的參數(shù)是todo對(duì)象
	addTodo = (todoObj)=>{
		//獲取原todos
		const {todos} = this.state
		//追加一個(gè)todo
		const newTodos = [todoObj,...todos]
		//更新狀態(tài)
		this.setState({todos:newTodos})
	}
	//updateTodo用于更新一個(gè)todo對(duì)象
	updateTodo = (id,done)=>{
		//獲取狀態(tài)中的todos
		const {todos} = this.state
		//匹配處理數(shù)據(jù)
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}
	//deleteTodo用于刪除一個(gè)todo對(duì)象
	deleteTodo = (id)=>{
		//獲取原來的todos
		const {todos} = this.state
		//刪除指定id的todo對(duì)象
		const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
		//更新狀態(tài)
		this.setState({todos:newTodos})
	}
	//checkAllTodo用于全選
	checkAllTodo = (done)=>{
		//獲取原來的todos
		const {todos} = this.state
		//加工數(shù)據(jù)
		const newTodos = todos.map((todoObj)=>{
			return {...todoObj,done}
		})
		//更新狀態(tài)
		this.setState({todos:newTodos})
	}
	//clearAllDone用于清除所有已完成的
	clearAllDone = ()=>{
		//獲取原來的todos
		const {todos} = this.state
		//過濾數(shù)據(jù)
		const newTodos = todos.filter((todoObj)=>{
			return !todoObj.done
		})
		//更新狀態(tài)
		this.setState({todos:newTodos})
	}
	render() {
		const {todos} = this.state
		return (
			<div className="todo-container">
                            <div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                            </div>
			</div>
		)
	}
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'
export default class Header extends Component {
	//對(duì)接收的props進(jìn)行：類型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}
	//鍵盤事件的回調(diào)
	handleKeyUp = (event)=>{
		//解構(gòu)賦值獲取keyCode,target
		const {keyCode,target} = event
		//判斷是否是回車按鍵
		if(keyCode !== 13) return
		//添加的todo名字不能為空
		if(target.value.trim() === ''){
			alert('輸入不能為空')
			return
		}
		//準(zhǔn)備好一個(gè)todo對(duì)象
		const todoObj = {id:nanoid(),name:target.value,done:false}
		//將todoObj傳遞給App
		this.props.addTodo(todoObj)
		//回車后清空輸入
		target.value = ''
	}
	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handleKeyUp} type="text" placeholder="請(qǐng)輸入你的代辦事件名稱，按回車鍵確認(rèn)"/>
			</div>
		)
	}
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'
export default class List extends Component {
	//對(duì)接收的props進(jìn)行：類型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired,
		deleteTodo:PropTypes.func.isRequired,
	}
	render() {
		const {todos,updateTodo,deleteTodo} = this.props
		return (
			<ul className="todo-main">
				{
				    todos.map( todo =>{
					return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
				    })
				}
			</ul>
		)
	}
}

import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {
	state = {mouse:false} //標(biāo)識(shí)鼠標(biāo)移入、移出
	//鼠標(biāo)移入、移出的回調(diào)
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}
	//勾選、取消勾選某一個(gè)todo的回調(diào)
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}
	//刪除一個(gè)todo的回調(diào)
	handleDelete = (id)=>{
		if(window.confirm('確定刪除嗎？')){
			this.props.deleteTodo(id)
		}
	}
	render() {
		const {id,name,done} = this.props
		const {mouse} = this.state
		return (
			<li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
				<label>
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
					<span>{name}</span>
				</label>
				<button onClick={()=> this.handleDelete(id) } className="btn btn-blue" style={{display:mouse?'block':'none'}}>刪除</button>
			</li>
		)
	}
}

import React, { Component } from 'react'
import './index.css'
export default class Footer extends Component {
	//全選checkbox的回調(diào)
	handleCheckAll = (event)=>{
		this.props.checkAllTodo(event.target.checked)
	}
	//清除已完成任務(wù)的回調(diào)
	handleClearAllDone = ()=>{
		this.props.clearAllDone()
	}
	render() {
		const {todos} = this.props
		//已完成的個(gè)數(shù)
		const doneCount = todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0)
		//總數(shù)
		const total = todos.length
		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0 ? true : false}/>
				</label>
				<span>
					<span>已完成{doneCount}</span> / 全部{total}
				</span>
				<button onClick={this.handleClearAllDone} className="btn btn-blue">清除已完成事件</button>
			</div>
		)
	}
}