import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useState } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import Button, { StyledButton } from '../Button';
import Icon, { registerIcon, StyledIcon } from '../Icon';
import { useConsolidatedRef, useEscape, useI18n } from '../../hooks';
import { getChildOfRootNode } from '../../utils';
import { defaultThemeProp } from '../../theme';
import * as DragIcon from '../Icon/icons/drag.icon';
import * as ArrowUpDownIcon from '../Icon/icons/arrow-micro-up-down.icon';
registerIcon(DragIcon);
registerIcon(ArrowUpDownIcon);
const StyledResizeButton = styled(Button)(({ rotateIcon }) => {
    return css `
    cursor: grab;

    &:active {
      cursor: grabbing;
    }

    &:not(:focus) {
      ${hideVisually};
    }

    ${rotateIcon &&
        css `
      ${StyledIcon} {
        transform: rotate(90deg);
      }
    `}
  `;
});
export const StyledResizeHandle = styled.div(({ theme }) => {
    return css `
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 0.125rem;
    background-color: transparent;
    transition: background-color ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
    cursor: ew-resize;
    z-index: ${theme.base['z-index'].max};

    ::before {
      content: '';
      position: absolute;
      inset: 0;
      width: calc(${theme.base['hit-area'].compact} * 0.75);
    }

    &:hover {
      background-color: ${theme.base.palette.interactive};
    }

    ${StyledButton} {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: calc(-2 * ${theme.base.spacing});
      translate: 0 -50%;
      box-shadow: ${theme.base.shadow.focus};
    }
  `;
});
StyledResizeHandle.defaultProps = defaultThemeProp;
const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown }, ref) {
    const resizeHandleRef = useConsolidatedRef(ref);
    const t = useI18n();
    const [mouseGrabbed, setMouseGrabbed] = useState(false);
    const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);
    useEscape(() => {
        setMouseGrabbed(false);
        setKeyboardGrabbed(false);
    });
    const handleKeyDown = (e) => {
        if (e.code === 'Space') {
            e.preventDefault();
            if (keyboardGrabbed) {
                setKeyboardGrabbed(false);
            }
            else {
                setKeyboardGrabbed(true);
            }
        }
        onKeyDown?.(e, keyboardGrabbed);
    };
    const handleMouseDown = (e) => {
        const targetNode = getChildOfRootNode(resizeHandleRef);
        if (!targetNode)
            return;
        targetNode.style.setProperty('user-select', 'none');
        setMouseGrabbed(true);
        onMouseDown?.(e);
    };
    const handleMouseUp = () => {
        const targetNode = getChildOfRootNode(resizeHandleRef);
        if (!targetNode)
            return;
        targetNode.style.removeProperty('user-select');
        setMouseGrabbed(false);
    };
    return (_jsx(StyledResizeHandle, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ref: resizeHandleRef, children: _jsx(StyledResizeButton, { tabIndex: 0, icon: true, label: !mouseGrabbed && !keyboardGrabbed ? t('resize') : undefined, "aria-label": !mouseGrabbed && !keyboardGrabbed
                ? t('drag_handle_activate_description')
                : t('drag_handle_cancel_description'), onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onBlur: () => {
                setKeyboardGrabbed(false);
            }, rotateIcon: keyboardGrabbed, children: _jsx(Icon, { name: keyboardGrabbed ? 'arrow-micro-up-down' : 'drag' }) }) }));
});
export default ResizeHandle;
//# sourceMappingURL=ResizeHandle.js.map