import React, { useEffect, useMemo, useState } from "react";
import "../TopNavBar/topnavbar.css";
import MenuDropDown from "./MenuDropdown/MenuDropDown";
import Notificaction from "./Notificaion/Notificaction";
import { useGetNotifications } from "../../../apis/Notifications";
import QRModal from "./QRModal/QRModal";

import personImage from "/assets/img/Man.png";
import googlePlay from "/assets/img/google-play-badge.png";
const PLAY_STORE_LINK =
  "https://play.google.com/store/apps/details?id=com.rkdholdings.psms&hl=en_IE";
/**
 * A top navigation bar component.
 * @param {object} props - The component's props.
 * @param {object} props.user - User information.
 * @param {object} props.userroles - User role information.
 * @param {boolean} props.showLogoutMOdal - Whether to show the logout modal.
 * @param {function} props.setShowLogoutModal - Function to set the state of the logout modal.
 * @param {function} props.setMobileMenu - Function to set the mobile menu state.
 * @param {boolean} props.mobileMenu - Whether the mobile menu is open.
 * @returns {JSX.Element} The rendered component.
 */
const TopNavbar = ({
  user,
  userroles,
  showLogoutMOdal,
  setShowLogoutModal,
  setMobileMenu,
  mobileMenu,
}) => {
  const [notification, setNotification] = useState(false);
  const [showDropdown, setShowDropdown] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [notifyData, setNotifyData] = useState([]);

  const [showQRModal, setShowQRModal] = useState(false);

  const handleDownloadClick = () => {
    setShowQRModal(true);
  };

  const handleCloseQRModal = () => {
    setShowQRModal(false);
  };

  const openModal = () => {
    setModalVisible(true);
  };

  const closeModal = () => {
    setModalVisible(false);
  };
  // Get notifications data
  const { data: notificationsData, isLoading: notifyLoading } =
    useGetNotifications();
  // Get notifications
  useMemo(() => {
    try {
      const temp = notificationsData?.data?.data?.results || [];
      setNotifyData([...temp].reverse());
      return temp;
    } catch (err) {
      console.log("error exits!", err);
    }
  }, [notificationsData?.data]);

  // get Unread notifications count
  const getUnreadNotificationsCount = useMemo(() => {
    try {
      let tempData = notificationsData?.data?.data?.results || [];
      const unreadData = tempData?.filter((item) => !item?.is_read);
      return unreadData.length || 0;
    } catch (err) {
      console.log("error exits!", err);
    }
  }, [notificationsData?.data]);

  return (
    <div className="top_navbar__container">
      <div className="left_topnavbar_wrapper flex items-center gap-2">
        <div className="left_topnavbar">
          <div
            className="mobile_menu"
            onClick={() => setMobileMenu(!mobileMenu)}
          >
            <ion-icon name="menu-sharp"></ion-icon>
          </div>
        </div>
      </div>
      <div
        className="right_topnavbar"
        onClick={() => setIsModalOpen((prev) => !prev)}
      >
        <button
          className="download-button"
          title="Download App"
          onClick={handleDownloadClick}
        >
          <ion-icon name="phone-portrait-outline"></ion-icon>
        </button>

        {showQRModal && (
          <div className="modal-content">
            <div
              className={showQRModal && "modal_overlay"}
              onClick={() => setShowQRModal(false)}
            ></div>
            <div className="qr-modal-content">
              <button className="close-button" onClick={handleCloseQRModal}>
                <ion-icon name="close-outline"></ion-icon>
              </button>
              <div className="shadow-overlay"></div>
              <div className="content-container">
                <div className="qr-content">
                  <a href={PLAY_STORE_LINK} target="_blank">
                    <img
                      src={googlePlay}
                      alt="Download on Google Play"
                      className="googlePlayBtn"
                    />
                  </a>
                  <QRModal />
                </div>
                <div className=" qr-content image-container">
                  {/* Add your image here */}
                  <img src={personImage} alt="App Screenshot" />
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="notification_div">
          <div onClick={() => setNotification(!notification)}>
            <ion-icon name="notifications"></ion-icon>
            <p>{getUnreadNotificationsCount}</p>
          </div>
          {notification && (
            <Notificaction
              setNotification={setNotification}
              notification={notification}
              notificationData={notifyData}
              setNotifyData={setNotifyData}
            />
          )}
        </div>
        <div className="user_Profile">
          {/* <p>{user?.first_name + " " + user?.last_name}</p> */}
          {showDropdown ? (
            <ion-icon
              name="settings"
              onClick={() => setShowDropdown(!showDropdown)}
              style={{
                padding: ".2rem",
                background: "#ffffff",
                borderRadius: "2rem",
              }}
            ></ion-icon>
          ) : (
            <ion-icon
              name="settings-outline"
              onClick={() => setShowDropdown(!showDropdown)}
            ></ion-icon>
          )}
          {showDropdown && (
            <MenuDropDown
              user={user}
              userroles={userroles}
              showLogoutMOdal={showLogoutMOdal}
              setShowLogoutModal={setShowLogoutModal}
              dropDownModal={showDropdown}
              setDropDownModal={setShowDropdown}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default TopNavbar;