import React, { Component } from 'react';
import FlipMove from 'react-flip-move';
import cookie from 'react-cookie'
import TodoList from './component/TodoList';
import FloatButton from './component/FloatButton';
import '../css/todo.css';

class TodoApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lists : [
        { 
          title: 'Welcome',
          todos: [
            { value: '☝︎ Add new item', done: false, editing: false },
            { value: '☜ Click to complete', done: true, editing: false },
            { value: 'Delete by clicking ☞', done: false, editing: false },
          ],
          inputText: '',
          titleDone: true,
          nowShowing: 'all',
        },
        { 
          title: 'School',
          todos: [
            { value: 'Midterm', done: false, editing: false },
            { value: 'Web Programming HW1', done: true, editing: false },
          ],
          inputText: '',
          titleDone: true,
          nowShowing: 'all',
        },
      ]
    };
  }

  handleAddClick = () => {
    const lists = this.state.lists;

    lists.push({
      title: 'New list',
      todos: [],
      inputText: '',
      titleDone: false,
      nowShowing: 'all',
    });

    this.setState({ lists });
  }

  handleClearAllClick = () => {
    const lists = this.state.lists;

    lists.forEach((list) => {
      let todos = list.todos;
      todos = todos.filter((t) => !t.done);
      list.todos = todos;
      return list;
    });

    this.setState({ lists });
  }

  handlePropsChange = (title, todos, inputText, titleDone, nowShowing, idx) => {
    const lists = this.state.lists;
    lists[idx] = { 
      title,
      todos,
      inputText,
      titleDone,
      nowShowing
    };
    this.setState({ lists });
  }

  handelCloseTodo = (idx) => {
    let lists = this.state.lists;
    lists.splice(idx, 1);
    this.setState({ lists });
  }

  handleFilterChange = (type, idx) => {
    let lists= this.state.lists;
    lists[idx].nowShowing = type;
    this.setState({ lists });
  }

  handleAllClick = () => {
    let lists= this.state.lists;
    lists.forEach((list, index) => {
      list.nowShowing = 'all';
    })
    this.setState({ lists });
  }

  handleActiveClick = () => {
    let lists= this.state.lists;
    lists.forEach((list, index) => {
      list.nowShowing = 'active';
    })
    this.setState({ lists });
  }

  handleCompletedClick = () => {
    let lists= this.state.lists;
    lists.forEach((list, index) => {
      list.nowShowing = 'completed';
    })
    this.setState({ lists });
  }

  renderTodoList = (list, idx) => {
    return (
      <TodoList
        title={ list.title }
        todos={ list.todos }
        inputText={ list.inputText }
        titleDone={ list.titleDone }
        nowShowing={ list.nowShowing }
        key={ idx }
        listIdx={ idx }
        onPropsChange={ this.handlePropsChange }
        onCloseTodo={ this.handelCloseTodo }
        onFilterChange={ (type) => this.handleFilterChange(type, idx) }
      />
    );
  }

  saveCookie = (d) => {
    const date = new Date();
    const days = d || 365;

    date.setTime(+ date + (days * 86400000));

    cookie.save('lists', this.state.lists, { 
      path: '/',
      expires: date,
    });
  }

  componentWillMount() {
    if (cookie.load('lists')) this.state = { lists: cookie.load('lists') };
  }

  componentDidMount() {
    this.saveCookie(24);
  }

  componentDidUpdate() {
    this.saveCookie(24);
  }

  render() {
    let doneCount = 0;
    this.state.lists.forEach((list) => {
      doneCount += list.todos.filter((t) => t.done).length;
    });
    let notDoneCount = 0;
    this.state.lists.forEach((list) => {
      notDoneCount += list.todos.filter((t) => !t.done).length;
    });

    return (
      <div className="todos">

        <h1>TODOS</h1>
        <div className="buttons-left">
          <FloatButton
            className="clouds-flat-button"
            value={ `${ doneCount + notDoneCount }` }
            onButtonCLick={ this.handleAllClick }
          />
          <FloatButton
            className="clouds-flat-button done-button"
            value={ `✔︎ ${ doneCount }` }
            onButtonCLick={ this.handleActiveClick }
          />
          <FloatButton
            className="clouds-flat-button not-done-button"
            value={ `✖︎ ${ notDoneCount }` }
            onButtonCLick={ this.handleCompletedClick }
          />
        </div>
        <div className="buttons-right">
          <FloatButton
            className="clouds-flat-button"
            value="+"
            onButtonCLick={ this.handleAddClick }
          />
          <FloatButton
            className="clouds-flat-button"
            value="⊘"
            onButtonCLick={ this.handleClearAllClick }
          />
        </div>

        <ul className="todo-lists-ul">
          <FlipMove
            className="todo-lists"
            duration={400}
            staggerDelayBy={80}
            easing="ease-out"
            appearAnimation="elevator">
            { this.state.lists.map((list, idx) => this.renderTodoList(list, idx)) }
          </FlipMove>
        </ul>

      </div>
    );
  }
}

export default TodoApp;

@@ -499,16 +499,12 @@
  '%E2%98%9C 
-Click to
+Mark
  com
@@ -508,16 +508,17 @@
 complete
+d
 ', done:
@@ -534,32 +534,107 @@
 iting: false %7D,%0A
+            %7B value: 'Double click to edit', done: false, editing: true %7D,%0A
             %7B va
@@ -3393,32 +3393,101 @@
     
-if (cookie.load('lists')
+const cookiesLists = cookie.load('lists');%0A    if (cookiesLists && cookiesLists%5B0%5D.nowShowing
 ) th
@@ -3512,30 +3512,22 @@
 : cookie
-.load('l
+sL
 ists
-')
  %7D;%0A  %7D%0A

Load cookies if nowShowing is preset