import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import Button from '../Button';
import BareRoleButton from '../Button/BareRoleButton';
import Icon, { registerIcon } from '../Icon';
import * as timesIcon from '../Icon/icons/times.icon';
import * as minusIcon from '../Icon/icons/minus.icon';
import * as undockIcon from '../Icon/icons/undock.icon';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import { useI18n, useModalContext } from '../../hooks';
registerIcon(timesIcon, minusIcon, undockIcon);
const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
    return css `
    height: 3rem;
    width: 30ch;
    border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;
    color: ${base.palette['foreground-color']};
    background-color: ${base.palette['primary-background']};
    box-shadow: ${base.shadow.low};
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};

    &:hover {
      box-shadow: ${base.shadow.high};
    }

    &:focus {
      outline: none;
      box-shadow: ${base.shadow.focus};
    }

    > div:first-child {
      margin-inline-end: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  `;
});
StyledMinimizedModal.defaultProps = defaultThemeProp;
const MinimizedModal = ({ heading, onBeforeClose, onAfterClose, onRequestDismiss, onRequestActivate, onRequestMinimize, onRequestMaximize, onRequestDock, ...restProps }) => {
    const { dismissible, dockable, maximizable, dock, maximize, activate, unmount } = useModalContext();
    const t = useI18n();
    return (_jsxs(Flex, { ...restProps, container: { alignItems: 'center', justify: 'between', pad: [0, 2], gap: 2 }, item: { shrink: 0 }, as: StyledMinimizedModal, "aria-label": `${t('activate')} ${heading}`, onKeyDown: (e) => {
            // Prevent issues when auto focusing on close button.
            if ((e.key === 'Space' || e.key === 'Enter') && e.target === e.currentTarget)
                e.preventDefault();
        }, onClick: () => {
            if (onRequestActivate?.() !== false && !dockable)
                activate();
            if (onRequestDock?.() !== false && dockable)
                dock();
        }, "data-app-region": true, children: [_jsx("div", { children: heading }), (maximizable || dockable || dismissible) && (_jsxs(Flex, { container: true, children: [maximizable && (_jsx(Button, { label: t('maximize'), "aria-label": t('modal_maximize'), variant: 'simple', onClick: () => {
                            if (onRequestMaximize?.() !== false) {
                                maximize();
                            }
                        }, icon: true, children: _jsx(Icon, { name: 'undock' }) })), dockable && (_jsx(Button, { label: t('dock'), "aria-label": t('modal_dock'), variant: 'simple', onClick: () => {
                            if (onRequestDock?.() !== false) {
                                dock();
                            }
                        }, icon: true, children: _jsx(Icon, { name: 'dock' }) })), dismissible && (_jsx(Button, { label: t('close'), "aria-label": t('modal_close'), variant: 'simple', onClick: () => {
                            if (onRequestDismiss?.() !== false) {
                                onBeforeClose?.();
                                unmount();
                                onAfterClose?.();
                            }
                        }, icon: true, children: _jsx(Icon, { name: 'times' }) }))] }))] }));
};
export default MinimizedModal;
//# sourceMappingURL=MinimizedModal.js.map