import { useState } from "react";
import SortingBtn from "../assets/svg/SortingBtn";
import Task from "./Task";
 
export default function TaskCard({ category, onEditTask, tasks }) {
  const [sortedTasks, setSortedTasks] = useState(null);
  const [sortingToogle, setSortingToogle] = useState(false);
  const backgroundColor = {
    todo: "bg-indigo-600",
    inprogress: "bg-yellow-500",
    done: "bg-teal-500",
    revised: "bg-rose-500",
  };
 
  const background = backgroundColor[category];
 
  function handleSorting() {
    const sorted = [...tasks[category]].sort((a, b) => {
      return new Date(a.date) - new Date(b.date);
    });
 
    setSortedTasks(sorted);
  }
  return (
    <div className="mb-4 w-full px-2 sm:w-1/2 md:w-1/4">
      {tasks[category]?.length > 0 ? (
        <div className={`rounded-lg ${background}  p-4`}>
          <div className="mb-2 flex items-center justify-between">
            <h3 className="text-lg font-semibold">
              {category} ({tasks[category]?.length})
            </h3>
            <div
              onClick={() => {
                setSortingToogle(!sortingToogle);
                handleSorting();
              }}
            >
              <SortingBtn />
            </div>
          </div>
 
          <div>
            {sortingToogle
              ? sortedTasks.map((task) => (
                  <Task
                    key={task.id}
                    task={task}
                    category={category}
                    onEditTask={onEditTask}
                    tasks={tasks}
                  />
                ))
              : tasks[category].map((task) => (
                  <Task
                    key={task.id}
                    task={task}
                    category={category}
                    onEditTask={onEditTask}
                    tasks={tasks}
                  />
                ))}
          </div>
        </div>
      ) : (
        <div className={`rounded-lg ${background} p-4`}>
          <h3 className="text-lg font-semibold">
            {category} ({tasks[category].length})
          </h3>
          <div className="mt-4">No task in {category} category</div>
        </div>
      )}
    </div>
  );
}