"use client";

import React, { useEffect, useState } from "react";
import { Link } from "@/i18n/routing";
import { Icon } from "@iconify/react/dist/iconify.js";
import { getInfoProfile, getListPorvinces, getUsersTeams } from "@/service/landing/landing";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";

const HeaderManagement = () => {
  const [profile, setProfile] = useState<any>();
  const [province, setProvince] = useState([]);
  const [, setUser] = useState();
  const [selectedTab, setSelectedTab] = useState("video");
  const params = useParams();
  const t = useTranslations("LandingPage");

  // const currentRoute = router.pathname;
  // const profilePicture = Cookies.get("profile_picture");

  useEffect(() => {
    async function initState() {
      const response = await getInfoProfile();
      setProfile(response?.data?.data);
    }

    async function getProvinces() {
      const response = await getListPorvinces();

      // console.log(response?.data?.data);
      setProvince(response?.data?.data);
    }

    // async function getDisticts() {
    //   const response = await getListDistricts();
    //   console.log(response?.data?.data);
    //   setDistrict(response?.data?.data);
    // }
    initState();
    getProvinces(); // getDisticts();
  }, []);

  useEffect(() => {
    async function initState() {
      if (profile != undefined) {
        const response = await getUsersTeams(profile?.instituteId);

        // console.log(response?.data?.data);
        setUser(response?.data?.data);
      }
    }

    initState();
  }, [profile]);

  function addDefaultProfile(ev: any) {
    ev.target.src = "/assets/avatar-profile.png";
  }

  const [hasMounted, setHasMounted] = useState(false);
  // Hooks
  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Render
  if (!hasMounted) return null;

  return (
    <div>
      {/* Header */}
      <div className="bg-[#cccccc] p-5 lg:p-8">
        <div className="flex flex-col lg:flex-row justify-center lg:justify-between mx-6 lg:mx-10">
          <div className="flex items-center gap-2 ">
            <img src="/assets/gg-profile.png" alt="avatar" className="w-14 h-14" />
            <div className="flex flex-col mx-2">
              <p className="text-black text-sm font-semibold">{profile?.fullname}</p>
              <p className="text-black text-sm font-light">{profile?.username}</p>
              <p className="text-black text-sm font-light">
                {t("activeSince", { defaultValue: "Active Since" })}&nbsp;
                {`${new Date(profile?.createdAt).getDate()}/${new Date(profile?.createdAt).getMonth() + 1}/${new Date(profile?.createdAt).getFullYear()} ${new Date(profile?.createdAt).getHours()}:${new Date(
                  profile?.createdAt
                ).getMinutes()}`}
              </p>
            </div>
          </div>
          <Link href="/profile" className="flex justify-center items-center text-black gap-2 mt-3 lg:mt-0">
            <p className="text-sm lg:text-base">{t("fullProfile", { defaultValue: "Full Profile" })}</p>
            <Icon icon="ri:arrow-right-s-line" className="h-5 w-5" />
          </Link>
        </div>
      </div>
    </div>
  );
};

export default HeaderManagement;