import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState, useEffect } from 'react';
import styled, { css } from 'styled-components';
import Button from '../Button';
import { defaultThemeProp } from '../../theme';
import Drawer from '../Drawer';
import Flex from '../Flex';
import getFocusables from '../../utils/getFocusables';
import Icon, { registerIcon } from '../Icon';
import Progress from '../Progress';
import { readableHue } from '../../styles/utils';
import { resizeDrawerDefaultWidth, resizeDrawerMaxWidth, resizeDrawerMinWidth } from '../../styles/constants';
import { StyledResizeHandle } from '../Drawer/ResizeHandle';
import * as timesIcon from '../Icon/icons/times.icon';
import useConsolidatedRef from '../../hooks/useConsolidatedRef';
import useDirection from '../../hooks/useDirection';
import useElement from '../../hooks/useElement';
import useFocusTrap from '../../hooks/useFocusTrap';
import useI18n from '../../hooks/useI18n';
import usePreviewContext from '../../hooks/usePreviewContext';
import useTestIds from '../../hooks/useTestIds';
import { withTestIds } from '../../utils';
import { getPreviewPanelTestIds } from './PreviewPanel.test-ids';
registerIcon(timesIcon);
export const StyledPreviewDrawer = styled(Drawer)(({ theme }) => {
    return css `
    min-width: ${resizeDrawerMinWidth};
    max-width: ${resizeDrawerMaxWidth};
    width: var(--resize-drawer-width);
    background-color: ${theme.base.palette['app-background']};
    height: auto;
    inset-block-start: calc(var(--app-header-height, 0rem) + var(--appshell-top-offset, 0rem));
    inset-block-end: var(--appshell-bottom-offset, 0);
    z-index: calc(${theme.base['z-index'].backdrop} - 1);
    transition-property: transform, box-shadow, opacity, border-inline-start;
    transition-duration: max(${theme.base.animation.speed}, 1ms);
    transition-timing-function: ${theme.base.animation.timing.ease};

    ${StyledResizeHandle} {
      z-index: calc(${theme.base['z-index'].max - 1});
    }

    @media (width >= ${theme.base.breakpoints.md}) {
      box-shadow: none;
      border-inline-start: 0.0625rem solid
        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {
        mode: 'both',
        level: 'AANonText'
    })};
    }
  `;
});
StyledPreviewDrawer.defaultProps = defaultThemeProp;
const StyledCloseButton = styled(Button)(({ theme }) => {
    return css `
    --half-btn-compact-difference: calc(
      (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2
    );
    @media (pointer: coarse) {
      --half-btn-compact-difference: calc(
        (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2
      );
    }
    position: absolute;
    border: none;

    /* Places above resize handle */
    z-index: ${theme.base['z-index'].max};
    box-shadow: ${theme.base.shadow.low};
    inset-inline-start: calc(-${theme.base['hit-area'].compact} / 2);
    inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));
  `;
});
StyledCloseButton.defaultProps = defaultThemeProp;
const PreviewPanel = forwardRef(function PreviewPanel({ testId, previewLabel, open, children, progress, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, ...restProps }, ref) {
    const testIds = useTestIds(testId, getPreviewPanelTestIds);
    const t = useI18n();
    const direction = useDirection();
    const previewRef = useConsolidatedRef(ref);
    const { previewTriggerRef } = usePreviewContext();
    const [closeButtonEl, setCloseButtonEl] = useElement();
    const [progressVisible, setProgressVisible] = useState(false);
    const setFocus = () => {
        if (progressVisible)
            return;
        const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);
        const focusable = focusables[0] ?? closeButtonEl;
        focusable?.focus();
    };
    useEffect(() => {
        if (!progressVisible) {
            setFocus();
        }
    }, [progressVisible]);
    useFocusTrap(previewRef, true, [], false);
    return (_jsxs(Drawer, { "data-testid": testIds.root, onBeforeOpen: () => {
            onBeforeOpen?.();
        }, onAfterOpen: () => {
            setFocus();
            onAfterOpen?.();
        }, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: previewRef, position: 'fixed', placement: direction.end, size: resizeDrawerDefaultWidth, "aria-label": previewLabel ? t('preview_of_noun', [previewLabel]) : t('preview'), open: open, resizeable: true, shadow: true, nullWhenClosed: true, ...restProps, children: [_jsx(StyledCloseButton, { "data-testid": testIds.close, icon: true, compact: true, onClick: () => {
                    onBeforeClose?.();
                    onAfterClose?.();
                    previewTriggerRef.current?.focus();
                }, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times', size: 'font-size' }) }), _jsx(Progress, { "data-testid": testIds.progress, placement: 'local', visible: !!progress, focusOnVisible: true, delay: true, onTransitionStartIn: () => {
                    setProgressVisible(true);
                }, onTransitionEndOut: () => setProgressVisible(false) }), !progress && children] }));
});
export default withTestIds(PreviewPanel, getPreviewPanelTestIds);
//# sourceMappingURL=PreviewPanel.js.map