import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
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 { useElement, useI18n, useModalContext, useTheme } from '../../hooks';
import Text from '../Text';
import Tooltip from '../Tooltip';
import useModalMove from './useModalMove';
import { StyledMinimizedLabel } from './Modal.styles';
registerIcon(timesIcon, minusIcon, undockIcon);
const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
    return css `
    height: 3rem;
    width: fit-content;
    min-width: 30ch;
    max-width: 56ch;
    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};
    padding: ${base.spacing};
    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};
    }

    ${StyledMinimizedLabel} {
      margin-inline-end: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &[data-moveable] {
      position: absolute;
    }
  `;
});
StyledMinimizedModal.defaultProps = defaultThemeProp;
const MinimizedModal = ({ heading, onBeforeClose, onAfterClose, onRequestDismiss, onRequestActivate, onRequestMinimize, onRequestMaximize, onRequestDock, icon, ...restProps }) => {
    const { dismissible, dockable, moveable, maximizable, dock, maximize, activate, unmount } = useModalContext();
    const [titleTarget, setTitleTarget] = useElement();
    const t = useI18n();
    // Note StyledMinimizedModal is a div but has the role of button
    const ref = useRef(null);
    const modalMoveReturnRef = useModalMove({
        enabled: !!moveable,
        moveRef: ref
    });
    const theme = useTheme();
    return (_jsxs(Flex, { ...restProps, container: { alignItems: 'center', justify: 'between', pad: [undefined, 2], gap: 1 }, 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 (modalMoveReturnRef.current?.mouseMoved)
                return;
            if (onRequestActivate?.() !== false && !dockable)
                activate();
            if (onRequestDock?.() !== false && dockable)
                dock();
        }, "data-app-region": true, "data-moveable": moveable ? '' : undefined, ref: ref, children: [icon && (_jsx(Icon, { name: icon, shape: 'square', size: 'm', background: theme.base.palette['app-background'] })), _jsx(Text, { as: StyledMinimizedLabel, ref: setTitleTarget, 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' }) }))] })), titleTarget && (_jsx(Tooltip, { target: titleTarget, smart: true, describeTarget: false, children: heading }))] }));
};
export default MinimizedModal;
//# sourceMappingURL=MinimizedModal.js.map