import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { AlertIcon, CheckIcon, InfoIcon, StopIcon, XIcon, } from '@primer/octicons-react';
import { Flash as PrimerFlash, IconButton } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useCallback, useState } from 'react';
/**
 * Closable flash component with actions.
 */
export const FlashClosable = ({ actions, children, closable = true, variant, sx, ...others }) => {
    const [open, setOpen] = useState(true);
    const visual = variant === 'warning' ? (_jsx(AlertIcon, {})) : variant === 'success' ? (_jsx(CheckIcon, {})) : variant === 'danger' ? (_jsx(StopIcon, {})) : (_jsx(InfoIcon, {}));
    const onClose = useCallback(() => {
        if (closable) {
            setOpen(false);
        }
    }, [closable]);
    return open ? (_jsxs(PrimerFlash, { ...others, variant: variant, sx: {
            ...sx,
            margin: 'var(--stack-gap-condensed) 0',
            display: 'grid',
            gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
            gridTemplateRows: 'min-content',
            gridTemplateAreas: "'visual message actions close'",
            '@media screen and (max-width: 544px)': {
                gridTemplateColumns: 'min-content 1fr',
                gridTemplateRows: 'min-content min-content',
                gridTemplateAreas: `
                'visual message close'
                '.      actions actions'
              `,
            },
        }, children: [_jsx(Box, { sx: {
                    display: 'grid',
                    paddingBlock: 'var(--base-size-8)',
                    alignSelf: 'center',
                    gridArea: 'visual',
                }, children: visual }), _jsx(Box, { sx: {
                    alignSelf: 'center',
                    display: 'grid',
                    gridArea: 'message',
                }, children: children }), _jsx(Box, { sx: {
                    display: 'grid',
                    gap: 'var(--stack-gap-condensed)',
                    marginLeft: 'actions',
                    '@media screen and (max-width: 544px)': {
                        alignSelf: 'start',
                        margin: 'var(--base-size-8) 0 0 var(--base-size-8)',
                    },
                }, children: actions }), closable && (_jsx(Box, { sx: {
                    alignSelf: 'start',
                    marginLeft: 'close',
                }, children: _jsx(IconButton, { "aria-label": "Dismiss flash message", title: "Dismiss", onClick: onClose, variant: "invisible", icon: XIcon, sx: {
                        '& > svg': { marginRight: 0, color: 'var(--fgColor-default)' },
                    } }) }))] })) : (_jsx(_Fragment, {}));
};
export default FlashClosable;
