"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var scroll_bar_1 = require("@monstrosity/utilities/common-styles/scroll-bar");
var disable_scroll_1 = require("@monstrosity/utilities/disable-scroll/disable-scroll");
function isDirectionConfig(props) {
    if (props.scrollX)
        return true;
    return false;
}
var getScrollString = function (scrollX, scrollY) {
    if (scrollX && scrollY)
        return 'auto auto';
    if (scrollX)
        return 'auto hidden';
    if (scrollY)
        return 'hidden auto';
    return 'hidden';
};
var ScrollContainer = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\toverflow: ", ";\n"], ["\n\toverflow: ", ";\n"])), function (_a) {
    var scrollX = _a.scrollX, scrollY = _a.scrollY;
    return getScrollString(scrollX, scrollY);
});
exports.ScrollTransformContainer = themed_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t", ";\n\n\t& > * {\n\t\toverflow: ", ";\n\t\t/* Put Custom Scrollbar Styling Here */\n\t\t/* Make very Slim Until Hover */\n\t\t/* Add Option to Hide Scrollbar Fully */\n\n\t\t", "\n\t}\n"], ["\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\n\t", ";\n\n\t& > * {\n\t\toverflow: ", ";\n\t\t/* Put Custom Scrollbar Styling Here */\n\t\t/* Make very Slim Until Hover */\n\t\t/* Add Option to Hide Scrollbar Fully */\n\n\t\t", "\n\t}\n"])), function (_a) {
    var styles = _a.styles;
    return styles;
}, function (_a) {
    var scrollX = _a.scrollX, scrollY = _a.scrollY;
    return getScrollString(scrollX, scrollY);
}, scroll_bar_1.styledScrollbar);
var onScroll = function (e, ref) {
    // e.preventDefault();
    if (!ref.current)
        return;
    /* Handle Horizontal Scroll in the same way for consistency */
    var scrollDelta = Math.floor(e.deltaY || e.deltaX);
    var scrollableElement = ref.current.firstChild;
    if (scrollDelta > 0 && scrollableElement.scrollLeft + scrollableElement.getBoundingClientRect().width >= scrollableElement.scrollWidth)
        return;
    if (scrollDelta < 0 && scrollableElement.scrollLeft === 0)
        return;
    scrollableElement.scroll(scrollableElement.scrollLeft + scrollDelta, scrollableElement.scrollTop);
};
exports.Scrollable = function (props) {
    var children = props.children, enableScrollOnBody = props.enableScrollOnBody, styles = props.styles;
    var ref = react_1.useRef();
    var onWheel = function (e) { return onScroll(e, ref); };
    var ScrollElement = isDirectionConfig(props)
        ? (react_1.default.createElement(ScrollContainer, { scrollX: props.scrollX, scrollY: props.scrollY, styles: styles }, children))
        : (react_1.default.createElement(exports.ScrollTransformContainer, { onWheel: onWheel, styles: styles, ref: ref, scrollX: true, scrollY: true }, children));
    return (react_1.default.createElement(react_1.default.Fragment, null,
        !enableScrollOnBody && react_1.default.createElement(disable_scroll_1.DisableScroll, null),
        ScrollElement));
};
var templateObject_1, templateObject_2;
