/* eslint-disable @typescript-eslint/no-explicit-any */

import { router } from "@inertiajs/react"

import styles from "./notification.module.scss"

import {
  MdOutlineNotifications,
  MdDone,
  MdDeleteOutline,
} from "react-icons/md"

import { formatDate } from "@/lib/utils/format-date"

const Notification = ({
  notification,
}: any) => {
  const isUnread =
    notification?.read_at === null

  const markAsRead = () => {
    router.post(
      route(
        "notifications.markAsRead",
        notification.id
      ),
      {},
      {
        preserveScroll: true,
      }
    )
  }

  const deleteNotification =
    () => {
      router.delete(
        route(
          "notifications.delete",
          notification.id
        ),
        {
          preserveScroll: true,
        }
      )
    }

  return (
    <div
      className={`${styles.notification} ${
        isUnread
          ? styles.notificationUnread
          : styles.notificationRead
      }`}
    >
      {isUnread && (
        <div
          className={
            styles.notification__badge
          }
        >
          New
        </div>
      )}

      <div
        className={
          styles.notification__header
        }
      >
        <div
          className={
            styles.notification__left
          }
        >
          <div
            className={
              styles.notification__icon
            }
          >
            <MdOutlineNotifications />
          </div>

          <div
            className={
              styles.notification__content
            }
          >
            <h4>
              {notification?.data
                ?.title ||
                "Notification"}
            </h4>

            <span>
              {formatDate(
                notification?.created_at
              )}
            </span>
          </div>
        </div>
      </div>

      <p
        className={
          styles.notification__message
        }
      >
        {notification?.data?.message}
      </p>

      <div
        className={
          styles.notification__actions
        }
      >
        {isUnread && (
          <button
            onClick={markAsRead}
            className={
              styles.notification__read
            }
          >
            <MdDone />
            Mark Read
          </button>
        )}

        <button
          onClick={
            deleteNotification
          }
          className={
            styles.notification__delete
          }
        >
          <MdDeleteOutline />
          Delete
        </button>
      </div>
    </div>
  )
}

export default Notification