import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '../Button';
import { ContentState } from '../ContentState';
import { SideDialogHeader } from '../SideDialogHeader';
import { cva } from '../utils/cva';
import { notificationListClassnames } from './constants';
import { Empty } from './Empty';
import { ListItem } from './ListItem';
import { MobileNotificationSkeleton } from './MobileNotificationSkeleton';
import { SettingsButton } from './SettingsButton';
import { ContentWrapper, List, StyledSideDialog, StyledSideDialogActions, TabsWrapper, } from './styles';
import { Tabs } from './Tabs';
import { useLogic } from './useLogic';
const rootCva = cva(notificationListClassnames.root, {
    variants: {
        hasUnreadNotifications: {
            true: notificationListClassnames.hasUnreadNotifications,
        },
        isError: {
            true: notificationListClassnames.error,
        },
        isLoading: {
            true: notificationListClassnames.loading,
        },
    },
});
export const NotificationList = ({ isOpen, title = 'Уведомления', isLoading, isError, errorMessage, notifications, unreadNotifications, initialListType, headerContent, footerContent, isSettingsButtonVisible = true, onClose, onDelete, onSettingsButtonClick, onTabChange, onRetry, }) => {
    const { listType, data, isEmptyData, isTabsVisible, handleTabChange, handleView, handleClose, handleRetry, imagesMap, isMobile, } = useLogic({
        initialListType,
        unreadNotifications,
        notifications,
        onTabChange,
        onClose,
        onRetry,
    });
    return (_jsxs(StyledSideDialog, { open: isOpen, onClose: handleClose, className: rootCva({
            hasUnreadNotifications: isTabsVisible,
            isError,
            isLoading,
        }), children: [_jsxs(SideDialogHeader, { title: title, onClose: handleClose, justifyContent: "flex-end", children: [headerContent, isSettingsButtonVisible && (_jsx(SettingsButton, { onClick: onSettingsButtonClick }))] }), _jsxs(ContentState, { isLoading: isLoading, isError: isError, loadingContent: isMobile && _jsx(MobileNotificationSkeleton, {}), loadingPlaceholderClassname: notificationListClassnames.loadingPlaceholder, errorState: {
                    imgAlt: '',
                    errorList: [errorMessage || ''],
                    onRetry: handleRetry,
                    imgSrc: imagesMap.defaultErrorImgSrc,
                    actions: (_jsx(Button, { color: "grey", variant: "light", onClick: handleRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })),
                }, children: [isTabsVisible && (_jsx(TabsWrapper, { children: _jsx(Tabs, { onChange: handleTabChange, listType: listType, notificationsCount: notifications.length, unreadNotificationsCount: unreadNotifications?.length || 0 }) })), _jsx(ContentWrapper, { children: isEmptyData ? (_jsx(Empty, { listType: listType, noDataImgSrc: imagesMap.noDataImgSrc })) : (_jsx(List, { children: data.map((notification) => (_jsx(ListItem, { ...notification, onDelete: onDelete, onViewNotification: handleView, isDeleteButtonVisible: Boolean(onDelete) }, notification.id))) })) })] }), footerContent && (_jsx(StyledSideDialogActions, { children: footerContent }))] }));
};
