import { useAuth } from "../../contexts/authContext";
import Image from "next/image";
import {
  FaMicrophoneAlt,
  FaHeadphonesAlt,
  FaTh,
  FaBell,
  FaSearch,
  FaBuilding,
  FaCalendarDay,
  FaClock,
} from "react-icons/fa";
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
import router from "next/router";
import Moment from "react-moment";

export default function Header() {
  const { logOut } = useAuth();
  const { team } = useTeamDashboardContext();

  async function handleSignOut() {
    console.log("clicked log out button");

    try {
      await logOut();

      router.push("/teams");
    } catch (error) {
      console.log(error);
    }
  }

  var today = new Date();

  return (
    <section className="flex-1 flex flex-row items-center justify-between py-5">
      {/* welcome message */}
      <span className="flex flex-col items-baseline">
        <span className="font-bold text-xl text-white">
          👋Hey Arjun, Good Afternoon!
        </span>

        {/* Date and time */}
        <span className="flex flex-row space-x-2">
          <span className="text-teal-700 bg-teal-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
            <FaBuilding />
            <span>{team.name}</span>
          </span>

          <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
            <FaCalendarDay />
            <Moment date={today} format="ddd, MMM DD" />
          </span>

          <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
            <FaClock />
            <Moment format="h:m a" />
          </span>
        </span>
      </span>

      {/* header control section */}
      <span className="flex flex-row items-center space-x-5">
        <button
          onClick={handleSignOut}
          className="mt-10 text-sm text-orange-500 font-semibold py-1 px-4 bg-orange-200 rounded"
        >
          👋 Logout
        </button>
        {/* search bar */}
        <div className="pt-2 flex flex-row relative items-center">
          <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
            <FaSearch className="text-white" />
          </button>

          <input
            className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
            type="search"
            name="search"
            placeholder="Search"
          />

          <button
            className="absolute right-1 rounded-lg py-1 px-2 ml-1 
                                    shadow-md text-center text-white text-sm font-bold"
          >
            CTRL + K
          </button>
        </div>

        <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
        <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
        <FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
        <FaTh className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />

        {/* avatar */}
        <span className="relative flex">
          <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
          <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
          <Image
            src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
            alt="profile"
            width={50}
            height={50}
          />
        </span>
      </span>
    </section>
  );
}