import { Button } from "@carbon/react";
import { Notification as NotificationIcon } from "@carbon/react/icons";
import React, { useContext, useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../assets/c3-icons";
import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from "../c3-notification-provider/c3-notification-container";
import { C3NotificationContext } from "../c3-notification-provider/c3-notification-provider";
import C3NavigationSideBar from "./c3-navigation-sidebar";
import { useNotificationSidebarState } from "./c3-sidebar-state-provider";
const PanelHeader = styled.div `
	background: var(--cds-layer-01);
	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
	width: 100%;
	height: 60px;
	padding: 24px 16px 13px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
`;
const PanelTitle = styled.span `
	color: var(--cds-text-primary);
	font-size: var(--cds-body-01-font-size);
	font-weight: var(--cds-body-01-font-weight);
	line-height: var(--cds-body-01-line-height);
	letter-spacing: var(--cds-body-01-letter-spacing);
`;
const DismissAllButton = styled(Button) `
	font-size: var(--cds-helper-text-01-font-size);
	font-weight: var(--cds-helper-text-01-font-weight);
	line-height: var(--cds-helper-text-01-line-height);
	letter-spacing: var(--cds-helper-text-01-letter-spacing);
`;
const EmptyState = styled.div `
	padding: 16px;
`;
const EmptyStateTitle = styled(NotificationTitle) `
	margin-top: 24px;
`;
const EmptyStateDescription = styled(NotificationDescription) `
	color: var(--cds-text-secondary);
	margin-top: 8px;
`;
export const C3NotificationSidebar = ({ sideBar }) => {
    const { onLinkClick } = sideBar;
    const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
    const [unreadNotifications, setUnreadNotifications] = useState([]);
    const hasUnreadNotifications = notifications?.some(({ state }) => state === "new");
    const { isOpen } = useNotificationSidebarState();
    const notificationsRef = useRef();
    notificationsRef.current = notifications;
    const markAllAsReadSidebar = () => {
        const newNotifications = notificationsRef.current?.filter((notification) => notification.state === "new");
        if (newNotifications)
            markAllAsRead(newNotifications);
    };
    const dismissAllSidebar = () => dismissAll(notifications);
    const beforeOpening = () => {
        // remember new notifications, so the dots can be displayed
        if (notificationsRef.current)
            setUnreadNotifications(notificationsRef.current
                .filter(({ state }) => state === "new")
                .map(({ uuid }) => uuid));
        markAllAsReadSidebar();
        if (enabled && analytics) {
            analytics("notification-panel-opened");
        }
    };
    const afterClosing = () => {
        markAllAsReadSidebar();
        setUnreadNotifications([]);
    };
    const sortNotificationsDescending = (a, b) => {
        if (new Date(a.timestamp) > new Date(b.timestamp))
            return -1;
        return 0;
    };
    useEffect(() => {
        // mark notifications as read on unmount
        return () => {
            if (isOpen)
                markAllAsReadSidebar();
        };
    }, []);
    return (React.createElement(C3NavigationSideBar, { sideBar: {
            ...sideBar,
            ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
            callbacks: { beforeOpening, afterClosing },
        }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, "aria-label": "Notifications" })) },
        React.createElement(PanelHeader, null,
            React.createElement(PanelTitle, null, "Notifications"),
            notifications.length > 0 && (
            // eslint-disable-next-line
            // @ts-ignore
            React.createElement(DismissAllButton, { kind: "ghost", size: "sm", onClick: dismissAllSidebar }, "Dismiss all"))),
        notifications.length > 0 ? (notifications.sort(sortNotificationsDescending).map((notification) => (React.createElement(C3NotificationContainer, { key: notification.uuid, onRead: () => {
                if (notification.state === "new") {
                    markAsRead(notification);
                }
            }, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
                if (enabled && analytics) {
                    analytics("notification-clicked-cta", notification.meta?.identifier);
                }
                if (onLinkClick) {
                    onLinkClick(notification.meta);
                }
            }, unread: unreadNotifications.some((id) => id === notification.uuid), ...notification })))) : (React.createElement(EmptyState, null,
            React.createElement(C3BellIcon, { size: 56 }),
            React.createElement(EmptyStateTitle, null, "No notifications"),
            React.createElement(EmptyStateDescription, null, "New updates regarding your processes, clusters and more will appear here.")))));
};
