import React from "react";
import Avatar from "../../common/Avatar";
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
import { useServiceProjectTeam } from "../../../hooks/useServiceProject";
import { useNavigate, useParams } from "react-router-dom";
import { SpinnerLoader } from "../../common/Loader";

const ServiceProjectTeamList = () => {
  const { projectId } = useParams();
  const { data, isLoading, isError, error } = useServiceProjectTeam(
    projectId,
    true
  );

  const navigate = useNavigate();

  const servceProjectColmen = [
    {
      key: "employeName",
      label: "Name",
      getValue: (e) => (
        <div className="d-flex align-items-center cursor-pointer"
          onClick={() => navigate(`/employee/${e.employee.id}`)}>
          {" "}
          <Avatar size="xs"
            firstName={e.employee.firstName}
            lastName={e.employee.lastName}
          />
          <small>{`${e.employee.firstName} ${e.employee.lastName}`}</small>
        </div>
      ),
      align: "text-start",
    },
    {
      key: "teamRole",
      label: "Role",
      getValue: (e) => {
        return (
          <div className="d-flex align-itmes-center">
            <span>{`${e.teamRole.name}`}</span>
          </div>
        );
      },
      align: "text-start",
    },
    {
      key: "assignedAt",
      label: "assigned Date",
      getValue: (e) =>
        formatUTCToLocalTime(e.assignedAT)
      ,
      align: "text-center",
    },
  ];
  return (
    <div className="table-responsive">
      <table className="table align-middle mb-0">
        <thead>
          <tr>
            {servceProjectColmen.map((col) => (
              <th key={col.key} className={col.align}>{col.label}</th>
            ))}
          </tr>
        </thead>

        <tbody>
          {data?.length > 0 ? (
            data.map((row) => (
              <tr key={row.id}>
                {servceProjectColmen.map((col) => (
                  <td key={col.key} className={col.align}>{col.getValue(row)}</td>
                ))}
              </tr>
            ))
          ) : (
            <tr>
              <td
                colSpan={servceProjectColmen.length}
                className="text-center py-4 border-0"
              >
                {isLoading ? (
                  <SpinnerLoader />
                ) : (
                  <div className="py-8">No Records Available</div>
                )}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default ServiceProjectTeamList;