import React, { Component } from "react";
import "../App.css";
import Task from "./Task";
import ButtonBar from "./ButtonBar";
import moment from "moment";

// TaskOrderList = {
//   //id  order
//     1:  1,
//     2:  3,
//     3:  2,
//     4:  4
// }

// id  name    taskSortnpm
// 1   asdf    [#1.#5.#4.#2]

class TaskList extends Component {
  state = {
    tasks: [
      {
        id: 1,
        checked: true,
        text: "Clean Dishes",
        time: "10:00am",
        dateAdded: "12/18/2018",
        dateCompleted: "",
        highlighted: false,
        sortOrder: 1
      },
      {
        id: 2,
        checked: true,
        text: "Wash Clothes",
        time: "10:15am",
        dateAdded: "12/20/2018",
        dateCompleted: "",
        highlighted: false,
        sortOrder: 3
      },
      {
        id: 3,
        checked: true,
        text: "Make List",
        time: "11:15am",
        dateAdded: "12/20/2018",
        dateCompleted: "",
        highlighted: false,
        sortOrder: 2
      },
      {
        id: 4,
        checked: true,
        text: "Complete List",
        time: "12:15am",
        dateAdded: "12/20/2018",
        dateCompleted: "",
        highlighted: false,
        sortOrder: 4
      }
    ]
  };

  onDelete = index => {
    let newTasks = [...this.state.tasks];
    newTasks.splice(index, 1);
    this.setState({ tasks: newTasks });
  };

  onRowMove = (e, index, direction = "down") => {
    let dirVal = 1;
    if (direction === "up") dirVal = -1;

    //handles 'down' limit
    if (dirVal === 1 && index === this.state.tasks.length - 1) return;

    //handles 'up' limit
    if (dirVal === -1 && index === 0) return;

    let newTasks = [...this.state.tasks];
    let tempA = newTasks[index]; //A

    newTasks[index] = newTasks[index + dirVal]; //B    setting B=A
    newTasks[index + dirVal] = tempA; //setting B= temp A

    this.setState({ tasks: newTasks });
  };

  addTask = () => {
    let newTasks = [...this.state.tasks];
    newTasks.unshift({
      id: newTasks.length + 1,
      checked: false,
      text: "",
      time: "",
      dateAdded: moment(new Date()).calendar(),
      dateCompleted: "",
      highlighted: false,
      sortOrder: newTasks.length + 1
    });

    this.setState({ tasks: newTasks });
  };

  onHighlight = index => {
    //console.log(index);
    const newTasks = [...this.state.tasks];

    newTasks[index].highlighted = !newTasks[index].highlighted;

    this.setState({
      tasks: newTasks
    });

    const taskToRender = this.state.tasks.reduce(
      (accumulator, item) => {
        if (item.highlighted) {
          //   console.log(item);
          accumulator.highlightedTasks.push(item);
        } else {
          accumulator.notHighlightedTasks.push(item);
        }
        return accumulator;
      },
      {
        highlightedTasks: [],
        notHighlightedTasks: []
      }
    );

    // console.log(taskToRender);

    const arr = [
      ...taskToRender.highlightedTasks,
      ...taskToRender.notHighlightedTasks
    ];
    // console.log(arr);

    this.setState({
      tasks: arr
    });
  };

  render() {
    // const taskToRender = this.state.tasks.reduce(
    //   (accumulator, item) => {
    //     if (item.highlighted) {
    //       accumulator.highlightedTasks.push(item);
    //     } else {
    //       accumulator.notHighlightedTasks.push(item);
    //     }
    //     return accumulator;
    //   },
    //   {
    //     highlightedTasks: [],
    //     notHighlightedTasks: []
    //   }
    // );

    return (
      <div>
        <ButtonBar onAdd={this.addTask} />
        <table className="tbl">
          <thead>
            <tr className="tbl hdr">
              <td className="chk" />
              <td>Task</td>
              <td>Due Date</td>
              <td>Date Added</td>
              <td>Date Completed</td>
              <td />
              <td />
              <td />
              <td />
            </tr>
          </thead>
          <tbody>
            {this.state.tasks.map((task, index) => (
              <Task
                key={task.id}
                task={task}
                index={index}
                onDelete={this.onDelete}
                onRowMove={this.onRowMove}
                onHighlightParent={this.onHighlight}
              />
            ))}
            {/* 
            {taskToRender.highlightedTasks.map((task, index) => (
              <Task
                key={task.id}
                task={task}
                index={index}
                onDelete={this.onDelete}
                onRowMove={this.onRowMove}
                onHighlight={this.onHighlight}
              />
            ))}
            {taskToRender.notHighlightedTasks.map((task, index) => (
              <Task
                key={task.id}
                task={task}
                index={index}
                onDelete={this.onDelete}
                onRowMove={this.onRowMove}
                onHighlightParent={this.onHighlight}
              />
            ))} */}
          </tbody>
        </table>
      </div>
    );
  }
}

export default TaskList;
