import { FaPlus } from "react-icons/fa";
import { UserStatus } from "../../models/user";

import Image from "next/image";
import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";

let testFriends = [
  {
    name: "Liam",
    role: "engineer",
    systemAvatar: "29",
    status: UserStatus.online,
  },
  {
    name: "Emily",
    role: "engineer",
    systemAvatar: "02",
    status: UserStatus.online,
  },
  {
    name: "Paul",
    role: "architect",
    systemAvatar: "43",
    status: UserStatus.online,
  },
  {
    name: "Mark",
    role: "engineer",
    systemAvatar: "04",
    status: UserStatus.busy,
  },
];

function statusBubble(status: UserStatus) {
  console.log(status);

  switch (status) {
    case UserStatus.online:
      return (
        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
      );
    case UserStatus.busy:
      return (
        <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
      );
    case UserStatus.offline:
      return (
        <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
      );
    default:
      return (
        <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
      );
  }
}

function renderPulse(status: UserStatus) {
  switch (status) {
    case UserStatus.online:
      return (
        <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
      );
    case UserStatus.busy:
      return (
        <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
      );
    case UserStatus.offline:
      return (
        <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
      );
    default:
      return (
        <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
      );
  }
}

export default function TeamVoiceLine() {
  return (
    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl">
      <span className="flex flex-row justify-start items-center pb-5">
        <span className="flex flex-col">
          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
            TEAM
          </span>
        </span>

        <button className="bg-gray-400 bg-opacity-50 p-2 ml-auto rounded hover:bg-opacity-40">
          <FaPlus className="text-lg text-gray-500" />
        </button>
      </span>

      {/* list of team members */}
      {testFriends.map((friend, i) => {
        return (
          <span
            key={i}
            className={
              "flex w-52 flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300"
            }
          >
            <span className="relative flex mr-2 shrink-0">
              <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>

              {statusBubble(friend.status)}

              <Image
                src={
                  "/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" +
                  friend.systemAvatar +
                  ".svg"
                }
                alt="profile"
                width={50}
                height={50}
              />
            </span>

            <span className="flex flex-col mr-10">
              <span className="flex flex-row items-center space-x-2">
                <span className="text-sm text-gray-600 font-semibold">
                  {friend.name}{" "}
                </span>
                <button
                  className="rounded-lg py-1 px-2 shadow-lg 
                                text-center text-gray-200 text-sm font-bold"
                >
                  {i}
                </button>
              </span>

              <span className={"text-xs span-sans text-gray-400"}>
                {friend.role}
              </span>
            </span>

            {renderPulse(friend.status)}
          </span>
        );
      })}
    </section>
  );
}