import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect } from 'react';
import styled from 'styled-components';
import { defaultThemeProp } from '../../theme';
import Button from '../Button';
import Icon, { registerIcon } from '../Icon';
import * as dockIcon from '../Icon/icons/dock.icon';
import * as undockIcon from '../Icon/icons/undock.icon';
import { useConsolidatedRef, useI18n } from '../../hooks';
import { useFullscreenContext } from './Fullscreen';
registerIcon(dockIcon, undockIcon);
export const StyledFullscreenButton = styled(Button) ``;
StyledFullscreenButton.defaultProps = defaultThemeProp;
export default forwardRef(function FullscreenButton({ onClick, ...restProps }, ref) {
    const t = useI18n();
    const ctxVal = useFullscreenContext();
    const btnRef = useConsolidatedRef(ref);
    useEffect(() => {
        if (!ctxVal || !btnRef.current)
            return;
        if (ctxVal[0] !== undefined) {
            btnRef.current.focus();
        }
    }, [ctxVal && ctxVal[0]]);
    if (!ctxVal)
        return null;
    const [fullscreen, toggleFullscreen] = ctxVal;
    return (_jsx(StyledFullscreenButton, { ...restProps, ref: btnRef, icon: true, variant: 'simple', label: t(fullscreen ? 'exit_fullscreen' : 'enter_fullscreen'), onClick: (e) => {
            toggleFullscreen();
            onClick?.(e);
        }, children: _jsx(Icon, { name: fullscreen ? 'dock' : 'undock' }) }));
});
//# sourceMappingURL=FullscreenButton.js.map