/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-c2a807a
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import THEMES from '../../../data/themes.js';
import { CheckIcon, CloseIcon, ExclamationIcon, InfoIcon, } from '../../../icons/index.js';
import { tasty } from '../../../tasty/index.js';
import { Action } from '../../actions/index.js';
import { Block } from '../../Block.js';
import { Card } from '../../content/Card/Card.js';
const NotificationElement = tasty(Card, {
    role: 'region',
    styles: {
        display: 'grid',
        color: '#dark-02',
        padding: '.5x',
        shadow: true,
        border: false,
        margin: '1x bottom',
        radius: '1x',
        gridColumns: 'auto 1fr auto',
        placeItems: 'center start',
        gap: '2x',
        preset: 't3',
        Icon: {
            display: 'flex',
            radius: '1r',
            width: '5x',
            height: '5x',
            placeContent: 'center',
            placeItems: 'center',
            preset: 't2',
            color: {
                '': '#dark-02',
                ...Object.keys(THEMES).reduce((map, theme) => {
                    map[`theme=${theme}`] = THEMES[theme].color;
                    return map;
                }, {}),
            },
            fill: {
                '': '#clear',
                ...Object.keys(THEMES).reduce((map, theme) => {
                    map[`theme=${theme}`] = THEMES[theme].fill;
                    return map;
                }, {}),
            },
        },
    },
});
const CloseButton = tasty(Action, {
    styles: {
        color: { '': '#dark-02', hovered: '#purple' },
        width: '5x',
        height: '5x',
        label: 'Close',
    },
});
export function Notification(allProps) {
    let { theme, type, children, onClose, ...props } = allProps;
    theme = theme || type || 'note';
    let Icon;
    switch (theme) {
        case 'success':
            Icon = CheckIcon;
            break;
        case 'danger':
            Icon = ExclamationIcon;
            break;
        default:
            Icon = InfoIcon;
            break;
    }
    return (_jsxs(NotificationElement, { ...props, "data-theme": theme, children: [_jsx("div", { "data-element": "Icon", children: _jsx(Icon, {}) }), _jsx(Block, { children: children }), _jsx(CloseButton, { onPress: onClose, children: _jsx(CloseIcon, {}) })] }));
}

        