"use client";
import { doLogout } from "@/app/actions/authenticationActions";
import MainButton from "@/components/ui/MainButton";
import Modal from "@/components/ui/Modal";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { images } from "@/lib/images";
import { useAuth } from "@/providers/AuthProvider";
import Image from "next/image";
import { useEffect, useState } from "react";
import LangLink from "../../../ui/localization/LangLink";
import Login from "../../login-signup/Login";
import CartIcon from "./CartIcon";
import getProfile from "@/app/api-requests/getProfile";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { userInfoStore } from "@/app/store/userInfoStore";

const UserOptions = ({
  withProfileImage = false,
  closeSideMenu = () => {},
}: {
  withProfileImage?: boolean;
  closeSideMenu?: () => void;
}) => {
  const { updateUserInfo } = userInfoStore();
  const { lang } = useCurrentLanguage();
  const [notificationPopover, setNotificationPopover] = useState(false);
  const [popOver, setPopOver] = useState(false);
  const [open, setOpen] = useState(false);
  const { refetchProfile, isLoading, userData } = getProfile();

  const user = useAuth();
  const userImage = user?.admin?.image;
  useEffect(() => {
    refetchProfile();
    updateUserInfo({
      email: userData?.email,
      title: userData?.title,
      phone: userData?.phone,
      username: userData?.username,
      is_verify: userData?.is_verify,
    });
  }, [user]);
  return (
    <>
      <>
        {/* user , notification , cart icon */}
        <div
          className={`ltr:mr-3 rtl:ml-3 flex items-center justify-center max-md:!mx-0  ${
            !user?.token && "hidden"
          }`}
        >
          {/* cart icon */}

          <CartIcon closeSideMenu={closeSideMenu} />

          {/* notification icon */}
          <Popover
            open={notificationPopover}
            onOpenChange={setNotificationPopover}
          >
            <PopoverTrigger className="mx-1 rounded-full w-7 h-7">
              <Image
                width={20}
                height={20}
                className="w-full h-full invert lg:invert-0"
                src={images.notification}
                alt="user profile"
              />
            </PopoverTrigger>
            <PopoverContent className="bg-white">
              <div className="mb-3 text-mainBlue">
                <TranslateClient text="notification_history" />
                <LangLink
                  href="notification"
                  noActive
                  className="text-blue-700"
                  onClick={() => setNotificationPopover(false)}
                >
                  {" "}
                  <TranslateClient text="click_here" />{" "}
                </LangLink>
                <TranslateClient text="moving_to_page" />
              </div>
              {/* <div className="mb-3 text-mainBlue">
                    تم اضافة منتجات جديدة , برجاء الاطلاع عليها ,
                    <LangLink href="notification" noActive className="text-blue-700">
                        {" "}
                        اضغط هنا{" "}
                    </LangLink>
                    للانتقال للصفحة المطلوبة
                </div>
                <div>تم قبول طلبك للشراء , برجاء اضافة الفاتورة , اضغط هنا للانتقال للصفحة المطلوبة</div> */}
            </PopoverContent>
          </Popover>

          {/* user icon image */}
          {withProfileImage && (
            <Popover open={popOver} onOpenChange={setPopOver}>
              <PopoverTrigger className="mx-1 rounded-full border border-mainBlue w-8 h-8 overflow-hidden">
                <Image
                  width={20}
                  height={20}
                  className="w-full h-full object-cover"
                  src={userImage ? userImage : images.profile}
                  alt="user profile"
                />
              </PopoverTrigger>
              <PopoverContent className="bg-white w-[180px]">
                <button
                  className="mb-3 block"
                  onClick={() => setPopOver(false)}
                >
                  <LangLink href="profile/settings" noActive>
                    <TranslateClient text="user_settings" />
                  </LangLink>
                </button>
                <button
                  className="text-red-500 block"
                  onClick={async () => {
                    await doLogout(lang);
                    setPopOver((prev) => !prev);
                  }}
                >
                  <TranslateClient text="logout" />
                </button>
              </PopoverContent>
            </Popover>
          )}
        </div>
      </>
      <>
        {/* sign-up btn */}
        <div
          className="mx-3"
          hidden={!!user?.token || isLoading}
          onClick={() => setOpen(true)}
        >
          <MainButton className="w-[140px]" intent="primary" size="sm">
            <TranslateClient text="sign_up" />
          </MainButton>
        </div>
      </>
      <Modal open={open} setOpen={setOpen}>
        <Login setOpen={setOpen} />
      </Modal>
    </>
  );
};

export default UserOptions;