import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback, useRef } from 'react';
import cx from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { TransitionTimeOut, StyleMap } from '../../constants';
import { renderHeader } from './Header';
import { renderFooter } from './Footer';
import { renderCloseBtn } from './CloseBtn';
import { addEventListener } from '../../../utils/component/event-handler';
var DrawerContent = function (_a) {
    var _b;
    var mask = _a.mask, visible = _a.visible, title = _a.title, children = _a.children, footer = _a.footer, placement = _a.placement, closeBtn = _a.closeBtn, onClose = _a.onClose, onExited = _a.onExited, rest = __rest(_a, ["mask", "visible", "title", "children", "footer", "placement", "closeBtn", "onClose", "onExited"]);
    var width = 'width' in rest && rest.width;
    var height = 'height' in rest && rest.height;
    var unsubscribePageClickRef = useRef();
    var drawerEl = useRef();
    var onDrawerOpened = useCallback(function () {
        if (!mask) {
            unsubscribePageClickRef.current = addEventListener(document, 'click', function (e) {
                var _a;
                var target = e.target;
                if (document.contains(target) &&
                    !((_a = drawerEl.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
                    onClose();
                }
            });
        }
    }, [onClose, mask]);
    var onDrawerExit = useCallback(function () {
        var _a;
        if (!mask) {
            (_a = unsubscribePageClickRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribePageClickRef);
        }
    }, [mask]);
    var customWH = useMemo(function () {
        var handleNumber = function (data) {
            return typeof data === 'number' ? data + "px" : data;
        };
        if ('left' === placement || 'right' === placement) {
            return { width: handleNumber(width) };
        }
        return { height: handleNumber(height) };
    }, [placement, width, height]);
    return (_jsx(CSSTransition, __assign({ appear: true, mountOnEnter: true, unmountOnExit: true, in: visible, timeout: TransitionTimeOut, classNames: "zent-drawer-transition-" + placement, onEntered: onDrawerOpened, onExit: onDrawerExit, onExited: onExited }, { children: _jsxs("div", __assign({ ref: drawerEl, className: cx('zent-drawer-content', (_b = {},
                _b["zent-drawer-content--transparent"] = !mask,
                _b)), style: __assign(__assign({}, StyleMap[placement]), customWH), "data-zv": 'v10.0.11' }, { children: [renderCloseBtn(closeBtn, onClose), renderHeader(title), _jsx("div", __assign({ className: "zent-drawer-body", "data-zv": 'v10.0.11' }, { children: children }), void 0), renderFooter(footer)] }), void 0) }), void 0));
};
export default DrawerContent;
