"use client"
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem
} from "@/shared/ui/sidebar";
import React from "react";
import {Avatar, AvatarFallback, AvatarImage} from "@/shared/ui/avatar";
import Link from "next/link";
import {profileSidebarMenu} from "@/shared/constants/profileSidebar";
import {useQuery} from "@tanstack/react-query";
import {getUserMe} from "@/shared/api/userMeSvc";
import { useTranslations } from "next-intl";

export function ProfileSidebar() {
  const t = useTranslations("")
  const {data: user} = useQuery({
    queryKey: ['getUserMe'],
    queryFn: getUserMe
  });
  return (
      <div className={"space-y-4 w-[400px]"}>
        <div
            className={"flex flex-col justify-center items-center text-center bg-white rounded-xl w-full h-fit p-10"}>
          <Avatar className={"w-24 h-24 mb-4"}>
            <AvatarImage
                src="https://images.unsplash.com/photo-1502685104226-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDJ8fGF2YXRhcnxlbnwwfHx8fDE2OTI3NzE5NTg&ixlib=rb-4.0.3&q=80&w=400"
                alt="Avatar"/>
            <AvatarFallback>{user?.data?.first_name && user?.data?.first_name[0].toUpperCase()}{user?.data?.last_name && user?.data?.last_name[0].toUpperCase()}</AvatarFallback>
          </Avatar>
          <h1 className={"text-md font-semibold"}>{user?.data.first_name} {" "} {user?.data?.last_name}</h1>
          <span className={"text-sm font-semibold text-gray-500"}>{user?.data.phone}</span>
        </div>
        <div className={"bg-white rounded-xl w-full h-fit"}>
          <SidebarGroup>
            <SidebarGroupContent>
              {profileSidebarMenu?.map(item => (
                  <React.Fragment key={item.label}>
                    {item.label && <SidebarGroupLabel>{t(item.label)}</SidebarGroupLabel>}
                    <SidebarMenu>
                      {item.menus.map(menu => (
                          <SidebarMenuItem key={menu.title}>
                            <SidebarMenuButton asChild>
                              <Link href={menu.url}>
                                <menu.icon/>
                                <span>{t(menu.title)}</span>
                              </Link>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                      ))}
                    </SidebarMenu>
                  </React.Fragment>
              ))}
            </SidebarGroupContent>
          </SidebarGroup>
        </div>
      </div>
  );
}