'use client'
import {
  addLocalOffsetFromDate,
  cn,
  formatDateSpecial,
  getPriorityColor,
  getStatusColor,
} from "@/lib/utils";
import { CircleUserRound } from "lucide-react";
import React, { useState } from "react";
import ModifyTaskSidebar from "./ModifyTask";
import moment from "moment";
import { Task } from "@/server/task/domain/models";

const TaskItem = ({ task, isTeamTask, isRecentModify=false }:{task:Task,isTeamTask:boolean,isRecentModify?:boolean}) => {
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);

  if(!task)return

  return (
    <article
      className="relative flex justify-between rounded-xl bg-white"
    >
      <div
        className={cn(
          "w-[80px] h-full text-nowrap absolute grid place-content-center px-2 left-0 top-0 bottom-0 rounded-l-xl",
          getStatusColor(task?.status)
        )}
      >
        <p className="text-xs font-bold first-letter:uppercase text-white mb-0.5">
          {task?.status}
        </p>
      </div>
      <div className="py-4 px-24">
        <div className="flex gap-5">
          <div>
            {isRecentModify ? (
              <p className="space-x-1 text-xs">
                <span>{task.projectName}</span>
                <span>-</span>
                <span>{moment(addLocalOffsetFromDate(task?.updatedAt!)).fromNow()}
                </span>
              </p>
            ) : (
              <p className="text-xs space-x-2 first-letter:uppercase font-light">
                <span>{task.projectName}</span>
                <span>{formatDateSpecial(task?.startDate)}</span>
                {task?.expireDate && (
                  <span>- {formatDateSpecial(task?.expireDate)}</span>
                )}
              </p>
            )}
          </div>
        </div>

        <p className="space-x-0.5 text-sm">
          <span className="font-bold">{task?.areaName}</span>
          <span>-</span>
          <span>{task?.floorName}</span>
        </p>
        <p className="text-xs text-gray-500 text-left">{task?.comments}</p>
      </div>

      <div className="border-l-2xl grid place-content-center gap-4 min-w-14 px-5">
        {isTeamTask ? (
          <div className="flex items-center gap-1 text-gray-500">
            <CircleUserRound size={20} />
            <span>{task?.user?.firstName}</span>
          </div>
        ) : (
          <button onClick={() => setSelectedTask(task)}>
            <ModifyTaskSidebar
              selectedTask={selectedTask!}
              isEmployeeEdit={true}
            />
          </button>
        )}
        <div className="flex flex-col justify-end">
          <div className="flex items-center text-right justify-end gap-1">
            <p className="text-xs font-light first-letter:capitalize">
              {task?.priority}
            </p>
            <div
              className={cn(
                "w-2 h-2 rounded-xl",
                getPriorityColor(task?.priority)
              )}
            ></div>
          </div>
        </div>
      </div>
    </article>
  );
};

export default TaskItem;