import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';

import Header from './components/Header'
import Footer from './components/Footer'
import CheckAll from './components/CheckAll'
import ListItem from './components/ListItem'

import uuid from 'uuid';
import filterTypes from './components/filter-types';

import {
    TransitionGroup,
    CSSTransition
} from 'react-transition-group';
import 'animate.css';

class App extends React.Component{
    constructor(){
        super();

        this.state = {
            todos:[
                {id:uuid(), title:'1我是牧码人老肖..', completed:false},
                {id:uuid(), title:'2我是牧码人老肖..', completed:false}
            ],
            filterType:filterTypes.ALL
        };
    }
    addTodo = (item) =>{
        this.setState({
            todos:[
                ...this.state.todos,
                {
                    id:uuid(),
                    ...item,
                    completed:false
                }
            ] 
        })
    }
    toggleChange = (id) =>{
        let todos = this.state.todos.map((item,index)=>{
            if(item.id===id){
                item.completed = !item.completed;
            }
            return item;
        });

        this.setState({todos});
    }
    handleDelete = (id) =>{
        let todos = this.state.todos.filter((item,index)=>item.id!==id);

        this.setState({todos});
    }
    toggleAll = (input) =>{
        let checked = input.checked;
        let todos = this.state.todos.map((item,index)=>{
            item.completed = checked;
            return item;
        });

        this.setState({todos});
    }
    changeFilterType = (filterType) =>{
        this.setState({filterType},()=>{
            console.log(this.state.filterType);
        });
    }
    delCompleted = () =>{
        let todos = this.state.todos.filter(item=>{
            return !item.completed
        });
        this.setState({todos});
    }
    render(){
        let todos = this.state.todos;
        let unCompletedCount = todos.reduce((pre,cur)=>pre+(cur.completed?0:1),0); //未完成任务数量
        let completedCount = todos.length - unCompletedCount;

        let filterTodos = todos.filter(item=>{
            switch(this.state.filterType){
                case filterTypes.UNCOMPLETED:
                    return item.completed === false;
                case filterTypes.COMPLETED:
                    return item.completed === true;
                default:
                    return item;
            }
        });

        const bodyContent = (<div className="card-body">
            <ul className="list-group list-group-flush">
                <CheckAll
                    unCompletedCount={unCompletedCount}
                    toggleAll = {this.toggleAll}
                ></CheckAll>
                <TransitionGroup>
                    {
                        filterTodos.map((item,index)=>
                            <CSSTransition
                                key={item.id}
                                timeout={500}
                                classNames={{
                                    enter:'animated',
                                    enterActive:'swing',
                                    exit:'animated',
                                    exitActive:'tada'
                                }}
                            >
                                <ListItem 
                                    key={item.id} 
                                    item={item}
                                    toggleChange={this.toggleChange}
                                    handleDel={this.handleDelete}
                                ></ListItem>
                            </CSSTransition>
                        )
                    }
                </TransitionGroup>
                
            </ul>
        </div>)
        return (<div className="container" style={{marginTop:'30px'}}>
            <div className="card">
                <Header addTodo={this.addTodo}></Header>
                {bodyContent}
                <Footer
                    unCompletedCount={unCompletedCount}
                    changeFilterType={this.changeFilterType}
                    currentFilter={this.state.filterType}
                    delCompleted={this.delCompleted}
                    completedCount={completedCount}
                ></Footer>
            </div>
        </div>)
    }
}

ReactDOM.render(<App />, document.getElementById('root'));