import "../Notificaion/notification.css";
import { Empty } from "antd";
import Axios from "../../../../utils/ApiConfiguration";
import { useQueryClient } from "@tanstack/react-query";
import NotificationCount from "./NotificationCount";
/**
 * Component for displaying notifications.
 * @param {object} props - Component props.
 * @param {Function} props.setNotification - Function to toggle the notification display.
 * @param {boolean} props.notification - Boolean indicating whether the notification modal is displayed.
 * @param {array} props.notificationData - Array of notification data.
 * @param {Function} props.setNotifyData - Function to update notification data.
 * @returns {JSX.Element} - Rendered component.
 */
const Notificaction = ({
  setNotification,
  notification,
  notificationData,
  setNotifyData,
}) => {
  const queryClient = useQueryClient();

  const handleNotificationClick = async (notice) => {
    try {
      const temp_data = notificationData.map((item, ) => ({
        ...item,
        temp_read:
          parseInt(item?.id) === parseInt(notice?.id) || item?.temp_read
      }));
      setNotifyData(temp_data);
      setTimeout(async () => {
        if (!notice?.is_read) {
          await Axios.put(`notification/${notice?.id}/`)
            .then((response) => {
              if (response) {
                queryClient.invalidateQueries(["notifications"]);
              }
            })
            .catch((err) => {
              if (err?.response?.status === 404) {
                queryClient.invalidateQueries(["notifications"]);
              }
              console.log(err.message);
            });
        }
      }, [30000]);
    } catch (err) {
      console.log(err);
    }
  };
  return (
    <>
      <div
        className={notification ? "notification_wrapper" : ""}
        onClick={() => setNotification(false)}
      >
      </div>
      <div className="notification_modal">
        <div className="notification_heading">
          <h3>Notifications</h3>
          <NotificationCount number={notificationData.length} />
        </div>
        <div className="notification_body">
          {notificationData?.length === 0 ? (
            <div className="noDataContainer">
              <Empty description="No new notifications" />
            </div>
          ) : (
            notificationData.map((notice, i) => (
              <div
                id={notice?.id}
                className={
                  notice?.temp_read
                    ? "temp_read_notification"
                    : "individual_notification"
                }
                key={i}
                onClick={() => {
                  handleNotificationClick(notice);
                }}
              >
                <ion-icon name="notifications"></ion-icon>
                <div className="notification_content">
                  <div className="company_name">
                    <h3>{notice?.title}</h3>
                    <span className="text-lg font-medium">{notice?.body}</span>
                    <br />
                    <span className="text-gray-500 text-base float-right">
                      {notice?.created_bs}
                    </span>
                  </div>
                </div>
                <div
                  className={notice?.temp_read ? "" : "notification_dot"}
                >
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </>
  );
};

export default Notificaction;