import React, { useState } from "react";
import styled from "styled-components";
import { Button, Link, Tile } from "@carbon/react";
import { Close } from "@carbon/react/icons";
const NotificationTile = styled(Tile) `
	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
`;
const CloseButton = styled(Button) `
	margin-right: -1rem;
	visibility: ${({ $show }) => ($show ? "visible" : "hidden")};
`;
const UnreadNotificationHeader = styled.div `
	display: flex;
	align-items: center;
	width: 100%;
`;
const Dot = styled.div `
	background: var(--cds-interactive);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	margin-left: -9px;
	margin-right: 4px;
`;
const Timestamp = styled.p `
	color: var(--cds-text-helper);
	font-size: var(--cds-label-01-font-size);
	font-weight: var(--cds-label-01-font-weight);
	line-height: var(--cds-label-01-line-height);
	letter-spacing: var(--cds-label-01-letter-spacing);
`;
const NotificationHeader = styled.div `
	width: 100%;
	min-height: 2rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: -1rem;
`;
export const NotificationTitle = styled.p `
	color: var(--cds-text-primary);
	font-size: var(--cds-heading-compact-01-font-size);
	font-weight: var(--cds-heading-compact-01-font-weight);
	line-height: var(--cds-heading-compact-01-line-height);
	letter-spacing: var(--cds-heading-compact-01-letter-spacing);
	margin-top: var(--cds-spacing-01);
`;
export const NotificationDescription = styled.p `
	color: var(--cds-text-primary);
	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);
	margin-top: var(--cds-spacing-01);
`;
export const LinkContainer = styled.div `
	margin-top: 0.5rem;
`;
const getReadableTimestamp = (timestamp) => {
    const date = new Date(timestamp);
    // eslint-disable-next-line
    // @ts-ignore
    const minutesAgo = Math.floor(Math.abs(new Date() - date) / 1000 / 60);
    if (minutesAgo === 0) {
        return "New";
    }
    if (minutesAgo < 60) {
        return `${minutesAgo}min ago`;
    }
    const hoursAgo = Math.floor(minutesAgo / 60);
    if (hoursAgo < 24) {
        return `${hoursAgo}hr ago`;
    }
    return date.toDateString();
};
const C3NotificationContainer = ({ description, state, timestamp, title, onDismiss, meta, onLinkClick, originalOnLinkClick, unread = false, }) => {
    const [isHovering, setIsHovering] = useState(false);
    const dismissNotification = (e) => {
        e.stopPropagation();
        onDismiss();
    };
    const handleLinkClick = (event) => {
        if (originalOnLinkClick && onLinkClick) {
            event.preventDefault();
            onLinkClick(meta);
            return false;
        }
        return true;
    };
    return (React.createElement(NotificationTile, { onMouseEnter: () => {
            setIsHovering(true);
        }, onMouseLeave: () => {
            setIsHovering(false);
        } },
        React.createElement(UnreadNotificationHeader, null,
            (state === "new" || unread) && React.createElement(Dot, null),
            React.createElement(NotificationHeader, null,
                React.createElement(Timestamp, null, getReadableTimestamp(timestamp)),
                React.createElement(CloseButton
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                , { 
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-ignore
                    kind: "ghost", hasIconOnly: true, iconDescription: "Dismiss", align: "bottom-right", renderIcon: Close, onClick: dismissNotification, size: "sm", "$show": isHovering }))),
        React.createElement(NotificationTitle, null, title),
        React.createElement(NotificationDescription, null, description),
        meta && (React.createElement(LinkContainer, null,
            React.createElement(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: "var(--cds-helper-text-01-font-size)" } }, meta.label)))));
};
export default C3NotificationContainer;
