'use strict';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Icon, iconNames } from '../../../../fd-component-toolbox/icon/Icon.js';
import { checkNotificationGroupDateLabel, getDateLabelForNotificationGroup, getNotificationListMessageId, getNotificationListDescriptionId, getNotificationListItemId } from './NotificationList.funcs.js';
import { cn } from '../../../../../fd-toolbox/lib/utils.js';
import { parseToUtc, formatUserFrendlyRelativeTime } from '../../../../../fd-toolbox/dates/date-time.js';
import { useElementId } from '../../../../../fd-toolbox/hooks/use-element-id.js';
import { elements } from '../../../../../fd-toolbox/constants/elements.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function NotificationList(t0) {
  const $ = c(3);
  const {
    parentContextName,
    notifications
  } = t0;
  const notificationMenuListId = useElementId(NotificationList.displayName, parentContextName);
  let t1;
  if ($[0] !== notificationMenuListId || $[1] !== notifications) {
    t1 = jsx("div", {
      id: notificationMenuListId,
      className: "h-full",
      children: notifications.length ? notifications.map((notification, index) => jsxs("div", {
        id: getNotificationListItemId(notification.id, notificationMenuListId),
        children: [checkNotificationGroupDateLabel(notifications, notification, index) && jsx("div", {
          className: "bg-muted/100 w-full border-b p-2 px-4",
          children: jsx("span", {
            className: "text-muted-foreground text-xs",
            children: getDateLabelForNotificationGroup(parseToUtc(notification.createdDate))
          })
        }), jsxs("div", {
          className: cn("bg-background hover:bg-muted/50 w-full border-b p-4 transition-all", notification.isRead && "opacity-70"),
          children: [jsxs("div", {
            className: "flex flex-row items-baseline justify-between",
            children: [jsx("span", {
              id: getNotificationListMessageId(notification.id, notificationMenuListId),
              className: "text-foreground font-semibold",
              children: notification.message
            }), jsxs("span", {
              className: cn("text-foreground ml-2 flex min-w-24 flex-row items-center justify-end gap-1 text-xs", !notification.isRead && "font-bold"),
              children: [!notification.isRead && jsx(Icon, {
                name: iconNames.dotFilled,
                className: "text-destructive stroke-[6]"
              }), formatUserFrendlyRelativeTime(notification.createdDate)]
            })]
          }), jsx("p", {
            id: getNotificationListDescriptionId(notification.id, notificationMenuListId),
            className: "text-muted-foreground text-sm",
            children: notification.description
          })]
        })]
      }, notification.id)) : jsx("div", {
        className: "flex h-full items-center justify-center pb-4",
        children: jsxs("div", {
          className: "flex flex-col items-center px-16 text-center",
          children: [jsx(Icon, {
            name: iconNames.globe,
            className: "mb-8 size-32"
          }), jsx("h4", {
            className: "mb-4 text-xl font-bold",
            children: "You don\u2019t have any notifications"
          }), jsx("p", {
            className: "text-muted-foreground m-4",
            children: "But as soon as something happens, you\u2019ll find it right here."
          })]
        })
      })
    });
    $[0] = notificationMenuListId;
    $[1] = notifications;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  return t1;
}
__name(NotificationList, "NotificationList");
NotificationList.displayName = elements.notification.list;

export { NotificationList };
