import cx from 'classnames';
import { Component } from 'react';

export default class TodoList extends Component {

    constructor(props){
         super(props);
         this.state={
             items:[],
             number_task_done:0,
             total_task:0,
             current_text:""
         }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleTaskClick = this.handleTaskClick.bind(this);

    }

     getItemTask(status, task_name){
        const class_name= ((status===1)?"is-done":"");
        return <li className="task" onClick={this.handleTaskClick}>
             <p className={class_name} type="text">{task_name}</p>
        </li>
    }

       handleChange(event) {
        this.setState({current_text: event.target.value});
      }
       handleSubmit(event)
       {
            this.appendNewTask(this.state.current_text)
            event.preventDefault();
        }
        handleTaskClick(e){
            const target = e.target || e.srcElement;
            const text = target.textContent || target.innerText;
            ///alert(text);
            var array=this.state.items;

            var i=0;
            for(i=0;i<array.length;i++)
             {

               if(array[i].name ===text)
               {
                   if(array[i].status===1)
                   {
                      array[i].status=0;
                   }
                   else
                      array[i].status=1;
                   this.setState({
                            number_task_done: (array[i].status===1)?this.state.number_task_done+1:this.state.number_task_done-1,
                            items: array,
                            current_text:""
                        });
               }
             }

        }


    appendNewTask(task){

        this.setState({
            total_task: this.state.total_task+1,
            items: [...this.state.items,{name:this.state.current_text, status:0}],
            current_text:""
        });



    }


    getAllTask(){

        const mapElement = this.state.items.map((item)=>{
            return this.getItemTask(item.status, item.name);////<li   onClick={this.handleTaskClick}>{item.name}</li>
        });
        return mapElement;
    }


    render() {
        return (
            <>
                <div class="todoListContainer">
                    <h2>
                        Todo List
                    </h2>
                   <input type="text" value={this.state.current_text} onChange={this.handleChange}/>
                   <input type="button" value="Add" onClick={this.handleSubmit}/>
                   <p> {this.state.number_task_done} remaining out of {this.state.total_task} task</p>
                   <ul>
                    {this.getAllTask()}
                   </ul>
                </div>
                <style>{`
                    .is-done {
                        text-decoration: line-through;
                    }
                `}</style>
            </>
        );
    }
}