import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CrossOutlineMd } from '../../../icons/CrossOutlineMd';
import { IconButton } from '../../IconButton';
import { Typography } from '../../Typography';
import { cva } from '../../utils/cva';
import { notificationListItemClassnames } from './constants';
import { Actions, IconSlot, ListItemContent, Priority, Title, TitleWrapper, Wrapper, } from './styles';
import { useLogic } from './useLogic';
import { getDateFormat } from './utils';
const rootCva = cva(notificationListItemClassnames.root, {
    variants: {
        hasCloseButton: {
            true: notificationListItemClassnames.hasCloseButton,
        },
    },
});
export const ListItem = ({ id, title, date, text, priority = 'ordinary', actions, isUnread = true, onViewNotification, isDeleteButtonVisible, onDelete, }) => {
    const { ref, handleDelete } = useLogic({
        id,
        onDelete,
        onViewNotification,
        isUnread,
    });
    return (_jsxs(Wrapper, { ref: ref, className: rootCva({ hasCloseButton: isDeleteButtonVisible }), children: [_jsx(IconSlot, { children: _jsx(Priority, { priority: priority }) }), _jsxs(ListItemContent, { children: [_jsxs(TitleWrapper, { children: [_jsx(Title, { variant: isUnread ? 'h6' : 'body1', children: title }), _jsx(Typography, { colorIntensity: "600", color: "grey", children: getDateFormat(date) })] }), _jsx(Typography, { variant: "body1", color: "grey", colorIntensity: "800", children: text }), actions && _jsx(Actions, { children: actions })] }), isDeleteButtonVisible && (_jsx(IconButton, { onClick: handleDelete, variant: "text", size: "small", color: "grey", children: _jsx(CrossOutlineMd, {}) }))] }));
};
