import PropTypes from "prop-types";
import Task from "./Task";
export default function TaskList({
  loading,
  tasks,
  onTogglePinTask,
  onArchiveTask,
  onEditTitle,
  onDeleteTask,
}) {
  const events = {
    onTogglePinTask,
    onArchiveTask,
    onEditTitle,
    onDeleteTask,
  };

  const LoadingRow = (
    <div className="loading-item">
      <span className="glow-checkbox" />
      <span className="glow-text">
        <span>Loading</span> <span>cool</span> <span>state</span>
      </span>
    </div>
  );
  if (loading) {
    return (
      <div className="list-items" data-testid="loading" key={"loading"}>
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
        {LoadingRow}
      </div>
    );
  }
  if (tasks.length === 0) {
    return (
      <div className="list-items" key={"empty"} data-testid="empty">
        <div className="wrapper-message">
          <span className="icon-check" />
          <p className="title-message">You have no tasks</p>
          <p className="subtitle-message">Sit back and relax</p>
        </div>
      </div>
    );
  }
  const tasksInOrder = [
    ...tasks.filter((t) => t.state === "TASK_PINNED"),
    ...tasks.filter((t) => t.state !== "TASK_PINNED"),
  ];

  return (
    <div
      className="list-items"
      data-testid="success"
      key={"success"}
      role="list"
      aria-label="tasks"
    >
      {tasksInOrder.map((task) => (
        <Task key={task.id} task={task} {...events} />
      ))}
    </div>
  );
}
TaskList.propTypes = {
  loading: PropTypes.bool,
  tasks: PropTypes.arrayOf(Task.propTypes.task).isRequired,
  onTogglePinTask: PropTypes.func.isRequired,
  onArchiveTask: PropTypes.func.isRequired,
  onEditTitle: PropTypes.func.isRequired,
  onDeleteTask: PropTypes.func.isRequired,
};

TaskList.defaultProps = {
  loading: false,
};