import React, { useState } from "react";

import plus from "assets/icons/plus.svg";

import "./allTaskTableItem.scss";

const AllTaskTableItem = ({ task, projects }) => {
  const [desc, setDesc] = useState(false);

  function toggleDescTask() {
    if (desc) {
      setDesc(false);
    } else {
      setDesc(true);
    }
  }

  return (
    <tr key={task.id}>
      <td>
        <div className="taskList__table__title-task">
          <p>{task.title}</p>

          <img
            src={plus}
            alt="#"
            onClick={toggleDescTask}
            className={desc ? "open-desc-item" : ""}
          />
        </div>
        <div
          className={
            desc
              ? "taskList__table__name-project"
              : "taskList__table__name-project hide-desc"
          }
        >
          <h4>Проект:</h4>
          <p>
            {projects?.map((project) => {
              if (project.id == task.project_id) {
                return project.name;
              }
            })}
          </p>
        </div>
      </td>
      <td>
        <div className="task-status">
          {task.status == 1 ? "Active" : "Close"}
        </div>
      </td>
      <td>
        {new Date(
          task.timers.reduce((acc, cur) => acc + cur.deltaSeconds, 0) * 1000
        )
          .toISOString()
          .slice(11, 19)}
      </td>
      <td>{new Date(task.created_at).toLocaleDateString()}</td>
      <td>{new Date(task.dead_line).toLocaleDateString()}</td>
    </tr>
  );
};

export default AllTaskTableItem;