import React, { useContext, useState } from "react";
import { format } from "date-fns";
import { NotificationsContext } from "../../../notificationsContext";
import { Button } from "../../../../common/Button";
const translateAction = (actionType) => {
    switch (actionType) {
        case "FINSEMBLE:RECEIVED":
            return "Notification received";
        case "FINSEMBLE:READ":
            return "Notification marked as read";
        case "FINSEMBLE:UNREAD":
            return "Notification marked as unread";
        case "SNOOZE":
            return "Snoozed";
        case "FINSEMBLE:WAKE":
            return "Renotified";
        case "SPAWN":
            return "Action: Spawn";
        default:
            return actionType;
    }
};
const formatTimeStamp = (timestamp, dateFormat = "dd-MM-yyyy HH:mm") => format(Date.parse(timestamp), dateFormat);
const renderActionHistoryItems = (notificationActionsHistory) => {
    if (!notificationActionsHistory || notificationActionsHistory.length === 0) {
        return React.createElement("span", null, "No actions to display");
    }
    else {
        return notificationActionsHistory
            .sort((a, b) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))
            .map((actionHistoryItem, index) => {
            const performedAction = actionHistoryItem;
            return (React.createElement("div", { key: performedAction.id || index, className: "notification-details__performed-action" },
                React.createElement("span", { className: "notification-details__performed-action-timestamp" }, formatTimeStamp(performedAction.datePerformed, "HH:mm dd-MM-yyyy")),
                React.createElement("span", { className: "notification-details__performed-action-translated" }, translateAction(performedAction.type))));
        });
    }
};
const NotificationDetailsView = ({ notification }) => {
    const notificationsContext = useContext(NotificationsContext);
    const [showDefaultIcon, setShowDefaultIcon] = useState(false);
    const goBack = () => {
        notificationsContext.setSelectedNotification(null);
    };
    return notification ? (React.createElement("div", { className: "notifications-details__container" },
        React.createElement("div", { style: { paddingRight: 8, marginLeft: -3 } },
            React.createElement(Button, { onClick: () => goBack(), fashion: "primary", iconBefore: "chevron-left", text: "Back" })),
        React.createElement("div", { className: "notification-details__header" },
            React.createElement("img", { src: notification.headerLogo, style: showDefaultIcon ? { display: "none" } : {}, onError: () => setShowDefaultIcon(true) }),
            showDefaultIcon ? React.createElement("i", { className: "ff-finsemble default-img" }) : null,
            React.createElement("div", { className: "notification-card__title" }, notification.title)),
        React.createElement("div", { className: "notification-details__body" }, notification.details),
        React.createElement("div", { className: "notification-details__section" },
            React.createElement("div", { className: "notification-details__section-title" }, "History"),
            renderActionHistoryItems(notification.actionsHistory)),
        React.createElement("div", { className: "notification-details__section" },
            React.createElement("div", { className: "notification-details__section-title" }, "App"),
            notification.source ? notification.source : "Uknown"),
        notification.type ? (React.createElement("div", { className: "notification-details__section" },
            React.createElement("div", { className: "notification-details__section-title" }, "Type"),
            React.createElement("span", { className: "notification-details__section-type-label" }, notification.type))) : null)) : null;
};
export default NotificationDetailsView;
//# sourceMappingURL=NotificationDetailsView.js.map