var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React, { useRef } from 'react';
import styled from '@monstrosity/utilities/themed-components';
import { styledScrollbar } from '@monstrosity/utilities/common-styles/scroll-bar';
import { DisableScroll } from '@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 = styled.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);
});
export var ScrollTransformContainer = styled.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);
}, 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);
};
export var Scrollable = function (props) {
    var children = props.children, enableScrollOnBody = props.enableScrollOnBody, styles = props.styles;
    var ref = useRef();
    var onWheel = function (e) { return onScroll(e, ref); };
    var ScrollElement = isDirectionConfig(props)
        ? (React.createElement(ScrollContainer, { scrollX: props.scrollX, scrollY: props.scrollY, styles: styles }, children))
        : (React.createElement(ScrollTransformContainer, { onWheel: onWheel, styles: styles, ref: ref, scrollX: true, scrollY: true }, children));
    return (React.createElement(React.Fragment, null,
        !enableScrollOnBody && React.createElement(DisableScroll, null),
        ScrollElement));
};
var templateObject_1, templateObject_2;
