import { __rest } from '../../_virtual/_tslib.js';
import React__default from 'react';
import { SideSheetContainer, SideSheetContentWrapper, HeaderWrapper, TitleWrapper, CloseButton, BackDrop } from './styles.js';
import { unitJSX } from '../../utils/index.js';
import { useOnClickOutside } from '../../hooks/useClickOutside.js';

function SideSheet(_a) {
    var { id, isOpen, width, title, onShowSideSheet, backdrop = false, fixed = false, hideHeader = false, hideCloseButton = false, hideOnOutsideClick = false, orientation = 'right', children } = _a, props = __rest(_a, ["id", "isOpen", "width", "title", "onShowSideSheet", "backdrop", "fixed", "hideHeader", "hideCloseButton", "hideOnOutsideClick", "orientation", "children"]);
    const handleClick = () => {
        onShowSideSheet();
    };
    const { containerRef } = useOnClickOutside(handleClick);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(SideSheetContainer, { ref: hideOnOutsideClick && isOpen ? containerRef : null, id: id, isOpen: isOpen, width: width, fixed: fixed, orientation: orientation, "data-testid": props['data-testid'], "data-trackid": props['data-trackid'] },
            React__default.createElement(SideSheetContentWrapper, { customContent: hideHeader },
                !hideHeader && (React__default.createElement(HeaderWrapper, null,
                    React__default.createElement(TitleWrapper, null, title),
                    !hideCloseButton && React__default.createElement(CloseButton, { onClick: handleClick }))),
                children)),
        backdrop && isOpen ? React__default.createElement(BackDrop, null) : unitJSX));
}

export { SideSheet };
