import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
import { useEffect, useRef, type FC } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Pages } from "../../../config/Pages";
import type { Task as TaskType } from "../types";
import UserAvatar from "./UserAvatar";

type Props = {
  task: TaskType;
  isDragging?: boolean;
  onClick?: (task: TaskType) => void;
};

const Task: FC<Props> = ({ task, isDragging, onClick }) => {
  const { t } = useTranslation("global");
  const suppressClickRef = useRef(false);

  useEffect(() => {
    if (isDragging) {
      suppressClickRef.current = true;
    }
  }, [isDragging]);

  const handleClick = () => {
    if (suppressClickRef.current) {
      suppressClickRef.current = false;
      return;
    }
    onClick?.(task);
  };

  return (
    <div
      onClick={handleClick}
      className={`bg-white rounded-lg p-2 w-full min-w-0 max-w-full overflow-hidden cursor-grab active:cursor-grabbing transition-opacity touch-manipulation ${
        isDragging ? "opacity-40 shadow-lg" : ""
      }`}
    >
      {task.color ? <div className="h-10 rounded-lg" style={{ backgroundColor: task.color }} /> : null}
      {task.tag ? (
        <div className="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit max-w-full truncate">
          {task.tag}
        </div>
      ) : null}
      <div className="font-bold text-xs mt-2 break-words">{task.title}</div>
      {task.ticketId ? (
        <Link
          to={Pages.ticket.detail + task.ticketId}
          onClick={(e) => e.stopPropagation()}
          className="mt-2 inline-flex items-center text-[10px] text-primary hover:underline"
        >
          {t("taskmanager.task_detail.related_ticket")}
        </Link>
      ) : null}
      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
        <div className="flex items-center gap-1 text-[10px] min-w-0">
          <Calendar size={16} color="#292D32" className="shrink-0" />
          <div className="truncate">{task.dateRange}</div>
        </div>

        <div className="flex gap-1 shrink-0">
          <AttachCircle size={16} color="#292D32" />
          <div>{task.attachments}</div>
        </div>
        <div className="flex gap-1 shrink-0">
          <TickSquare size={16} color="#292D32" />
          <div>
            {task.checklistDone}/{task.checklistTotal}
          </div>
        </div>
      </div>

      {task.users?.length ? (
        <div className="mt-2 flex justify-end pl-1.5">
          <div className="flex items-center -space-x-1.5 rtl:space-x-reverse">
            {task.users.map((user) => (
              <UserAvatar
                key={user.id}
                src={user.profilePic}
                alt={`${user.firstName} ${user.lastName}`}
                className="size-6 ring-2 ring-white"
              />
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
};

export default Task;