"use client";

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

const SidebarManagement = () => {
  const [profile, setProfile] = useState<any>();
  const [province, setProvince] = useState([]);
  const [, setUser] = useState();
  const [selectedTab, setSelectedTab] = useState("video");
  const params = useParams();
  const pathname = usePathname();
  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 className="p-4 lg:p-12 w-full lg:w-1/3 ">
      <div className="border rounded-2xl border-black m-4">
        <h1 className="text-xl p-5">{t("aboutMe", { defaultValue: "About Me" })}</h1>
        <div>
          <ul className="px-10 mb-4">
            <li className="mb-5 font-light">
              <p className="font-semibold">Email :</p>
              <p>{profile?.email}</p>
            </li>
            <li className="mb-5 font-light">
              <p className="font-semibold">{t("number", { defaultValue: "Number" })} :</p>
              <p>{profile?.phoneNumber}</p>
            </li>
            <li className="mb-5 font-light">
              <p className="font-semibold">{t("address", { defaultValue: "Address" })} :</p>
              <p>{profile?.address}</p>
            </li>
            <li className="mb-5 font-light">
              <p className="font-semibold">{t("category", { defaultValue: "Category" })} :</p>
              <p>{profile?.institute?.categoryRole?.name}</p>
            </li>
            <li className="mb-5 font-light">
              <p className="font-semibold">{t("company", { defaultValue: "Company" })} :</p>
              <p>{profile?.institute?.name}</p>
            </li>
          </ul>
        </div>
      </div>

      <div className="p-4 gap-1">
        <Link href="/content-management/galery" className="mb-3">
          <div className={`${pathname?.includes("/content-management/galery") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
            <div className="flex items-center gap-2 text-lg">
              <Icon icon="material-symbols-light:perm-media-rounded" />
              <p className="text-sm">
                {t("gallery", { defaultValue: "Gallery" })} {profile?.institute?.name}
              </p>
            </div>
            <div>
              <Icon icon="ri:arrow-right-s-line" fontSize={20} />
            </div>
          </div>
        </Link>
        <Link href="/content-management/download" className="mb-3">
          <div className={`${pathname?.includes("/content-management/download") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
            <div className="flex items-center gap-2 text-lg">
              <Icon icon="heroicons:photo-solid" />
              <p className="text-sm">{t("myGallery", { defaultValue: "My Gallery" })} </p>
            </div>
            <div>
              <Icon icon="ri:arrow-right-s-line" fontSize={20} />
            </div>
          </div>
        </Link>
        <Link href="/content-management/rewrite" className="mb-3">
          <div className={`${pathname?.includes("/content-management/rewrite") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
            <div className="flex items-center gap-2 text-lg">
              <Icon icon="material-symbols-light:perm-media-rounded" />
              <p className="text-sm">{t("gallery", { defaultValue: "Gallery" })} Rewrite</p>
            </div>
            <div>
              <Icon icon="ri:arrow-right-s-line" fontSize={20} />
            </div>
          </div>
        </Link>
        <Link href="/content-management/users" className="mb-3">
          <div className={`${pathname?.includes("/content-management/users") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
            <div className="flex items-center gap-2 text-lg">
              <Icon icon="mdi:users-group" />
              <p className="text-sm">{t("userTeam", { defaultValue: "User Team" })}</p>
            </div>
            <div>
              <Icon icon="ri:arrow-right-s-line" fontSize={20} />
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
};

export default SidebarManagement;