/**
 * DevExtreme (esm/renovation/ui/scroll_view/scrollbar/scrollbar.js)
 * Version: 23.2.6 (build 24140-0112)
 * Build date: Sun May 19 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["bounceEnabled", "containerHasSizes", "containerSize", "contentSize", "direction", "maxOffset", "minOffset", "scrollByThumb", "scrollLocation", "showScrollbar", "visible"];
import {
    createVNode
} from "inferno";
import {
    InfernoEffect,
    InfernoComponent
} from "@devextreme/runtime/inferno";
import {
    normalizeStyles
} from "@devextreme/runtime/inferno";
import {
    combineClasses
} from "../../../utils/combine_classes";
import domAdapter from "../../../../core/dom_adapter";
import {
    DIRECTION_HORIZONTAL,
    SCROLLABLE_SCROLLBAR_CLASS,
    SCROLLABLE_SCROLL_CLASS,
    SCROLLABLE_SCROLL_CONTENT_CLASS,
    SCROLLABLE_SCROLLBAR_ACTIVE_CLASS,
    HOVER_ENABLED_STATE,
    ShowScrollbarMode
} from "../common/consts";
import {
    subscribeToDXPointerDownEvent,
    subscribeToDXPointerUpEvent,
    subscribeToMouseEnterEvent,
    subscribeToMouseLeaveEvent
} from "../../../utils/subscribe_to_event";
import {
    ScrollbarProps
} from "../common/scrollbar_props";
import {
    ScrollableSimulatedProps
} from "../common/simulated_strategy_props";
export var THUMB_MIN_SIZE = 15;
export var viewFunction = viewModel => {
    var {
        hidden: hidden,
        scrollbarClasses: scrollbarClasses,
        scrollbarRef: scrollbarRef,
        thumbClasses: thumbClasses,
        thumbRef: thumbRef,
        thumbStyles: thumbStyles
    } = viewModel;
    return createVNode(1, "div", scrollbarClasses, createVNode(1, "div", thumbClasses, createVNode(1, "div", SCROLLABLE_SCROLL_CONTENT_CLASS), 2, {
        style: normalizeStyles(thumbStyles)
    }, null, thumbRef), 2, {
        hidden: hidden
    }, null, scrollbarRef)
};
export var ScrollbarPropsType = {
    get direction() {
        return ScrollbarProps.direction
    },
    get containerSize() {
        return ScrollbarProps.containerSize
    },
    get contentSize() {
        return ScrollbarProps.contentSize
    },
    get visible() {
        return ScrollbarProps.visible
    },
    get containerHasSizes() {
        return ScrollbarProps.containerHasSizes
    },
    get scrollLocation() {
        return ScrollbarProps.scrollLocation
    },
    get minOffset() {
        return ScrollbarProps.minOffset
    },
    get maxOffset() {
        return ScrollbarProps.maxOffset
    },
    get showScrollbar() {
        return ScrollableSimulatedProps.showScrollbar
    },
    get scrollByThumb() {
        return ScrollableSimulatedProps.scrollByThumb
    },
    get bounceEnabled() {
        return ScrollableSimulatedProps.bounceEnabled
    }
};
import {
    createRef as infernoCreateRef
} from "inferno";
export class Scrollbar extends InfernoComponent {
    constructor(props) {
        super(props);
        this.scrollbarRef = infernoCreateRef();
        this.scrollRef = infernoCreateRef();
        this.thumbRef = infernoCreateRef();
        this.__getterCache = {};
        this.state = {
            hovered: false,
            active: false
        };
        this.pointerDownEffect = this.pointerDownEffect.bind(this);
        this.pointerUpEffect = this.pointerUpEffect.bind(this);
        this.mouseEnterEffect = this.mouseEnterEffect.bind(this);
        this.mouseLeaveEffect = this.mouseLeaveEffect.bind(this);
        this.isThumb = this.isThumb.bind(this);
        this.isScrollbar = this.isScrollbar.bind(this);
        this.setActiveState = this.setActiveState.bind(this)
    }
    createEffects() {
        return [new InfernoEffect(this.pointerDownEffect, []), new InfernoEffect(this.pointerUpEffect, []), new InfernoEffect(this.mouseEnterEffect, [this.props.showScrollbar, this.props.scrollByThumb]), new InfernoEffect(this.mouseLeaveEffect, [this.props.showScrollbar, this.props.scrollByThumb])]
    }
    updateEffects() {
        var _this$_effects$, _this$_effects$2;
        null === (_this$_effects$ = this._effects[2]) || void 0 === _this$_effects$ ? void 0 : _this$_effects$.update([this.props.showScrollbar, this.props.scrollByThumb]);
        null === (_this$_effects$2 = this._effects[3]) || void 0 === _this$_effects$2 ? void 0 : _this$_effects$2.update([this.props.showScrollbar, this.props.scrollByThumb])
    }
    pointerDownEffect() {
        return subscribeToDXPointerDownEvent(this.thumbRef.current, () => {
            this.setState(__state_argument => ({
                active: true
            }))
        })
    }
    pointerUpEffect() {
        return subscribeToDXPointerUpEvent(domAdapter.getDocument(), () => {
            this.setState(__state_argument => ({
                active: false
            }))
        })
    }
    mouseEnterEffect() {
        if (this.isExpandable) {
            return subscribeToMouseEnterEvent(this.scrollbarRef.current, () => {
                this.setState(__state_argument => ({
                    hovered: true
                }))
            })
        }
        return
    }
    mouseLeaveEffect() {
        if (this.isExpandable) {
            return subscribeToMouseLeaveEvent(this.scrollbarRef.current, () => {
                this.setState(__state_argument => ({
                    hovered: false
                }))
            })
        }
        return
    }
    get dimension() {
        return this.isHorizontal ? "width" : "height"
    }
    get isHorizontal() {
        return this.props.direction === DIRECTION_HORIZONTAL
    }
    get scrollSize() {
        return Math.max(this.props.containerSize * this.containerToContentRatio, THUMB_MIN_SIZE)
    }
    get containerToContentRatio() {
        return this.props.contentSize ? this.props.containerSize / this.props.contentSize : this.props.containerSize
    }
    get scrollRatio() {
        var scrollOffsetMax = Math.abs(this.props.maxOffset);
        if (scrollOffsetMax) {
            return (this.props.containerSize - this.scrollSize) / scrollOffsetMax
        }
        return 1
    }
    get scrollbarClasses() {
        var classesMap = {
            [SCROLLABLE_SCROLLBAR_CLASS]: true,
            ["dx-scrollbar-".concat(this.props.direction)]: true,
            [SCROLLABLE_SCROLLBAR_ACTIVE_CLASS]: this.state.active,
            [HOVER_ENABLED_STATE]: this.isExpandable,
            "dx-state-invisible": this.hidden,
            "dx-state-hover": this.isExpandable && this.state.hovered
        };
        return combineClasses(classesMap)
    }
    get thumbStyles() {
        if (void 0 !== this.__getterCache.thumbStyles) {
            return this.__getterCache.thumbStyles
        }
        return this.__getterCache.thumbStyles = (() => ({
            [this.dimension]: Math.round(this.scrollSize) || THUMB_MIN_SIZE,
            transform: this.isNeverMode ? "none" : this.thumbTransform
        }))()
    }
    get thumbTransform() {
        var translateValue = -this.props.scrollLocation * this.scrollRatio;
        if (this.isHorizontal) {
            return "translate(".concat(translateValue, "px, 0px)")
        }
        return "translate(0px, ".concat(translateValue, "px)")
    }
    get thumbClasses() {
        return combineClasses({
            [SCROLLABLE_SCROLL_CLASS]: true,
            "dx-state-invisible": !this.isThumbVisible
        })
    }
    get hidden() {
        return this.isNeverMode || 0 === this.props.maxOffset || this.props.containerSize < 15
    }
    get isThumbVisible() {
        if (this.hidden) {
            return false
        }
        if (this.isHoverMode) {
            return this.props.visible || this.state.hovered || this.state.active
        }
        if (this.isAlwaysMode) {
            return true
        }
        return this.props.visible
    }
    get isExpandable() {
        return (this.isHoverMode || this.isAlwaysMode) && this.props.scrollByThumb
    }
    get isHoverMode() {
        return this.props.showScrollbar === ShowScrollbarMode.HOVER
    }
    get isAlwaysMode() {
        return this.props.showScrollbar === ShowScrollbarMode.ALWAYS
    }
    get isNeverMode() {
        return this.props.showScrollbar === ShowScrollbarMode.NEVER
    }
    get restAttributes() {
        var _this$props = this.props,
            restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
        return restProps
    }
    isThumb(element) {
        return this.scrollbarRef.current.querySelector(".".concat(SCROLLABLE_SCROLL_CLASS)) === element || this.scrollbarRef.current.querySelector(".".concat(SCROLLABLE_SCROLL_CONTENT_CLASS)) === element
    }
    isScrollbar(element) {
        return element === this.scrollbarRef.current
    }
    setActiveState() {
        this.setState(__state_argument => ({
            active: true
        }))
    }
    componentWillUpdate(nextProps, nextState, context) {
        super.componentWillUpdate();
        if (this.props.direction !== nextProps.direction || this.props.containerSize !== nextProps.containerSize || this.props.contentSize !== nextProps.contentSize || this.props.showScrollbar !== nextProps.showScrollbar || this.props.scrollLocation !== nextProps.scrollLocation || this.props.maxOffset !== nextProps.maxOffset) {
            this.__getterCache.thumbStyles = void 0
        }
    }
    render() {
        var props = this.props;
        return viewFunction({
            props: _extends({}, props),
            hovered: this.state.hovered,
            active: this.state.active,
            scrollbarRef: this.scrollbarRef,
            scrollRef: this.scrollRef,
            thumbRef: this.thumbRef,
            dimension: this.dimension,
            isHorizontal: this.isHorizontal,
            scrollSize: this.scrollSize,
            containerToContentRatio: this.containerToContentRatio,
            scrollRatio: this.scrollRatio,
            scrollbarClasses: this.scrollbarClasses,
            thumbStyles: this.thumbStyles,
            thumbTransform: this.thumbTransform,
            thumbClasses: this.thumbClasses,
            hidden: this.hidden,
            isThumbVisible: this.isThumbVisible,
            isExpandable: this.isExpandable,
            isHoverMode: this.isHoverMode,
            isAlwaysMode: this.isAlwaysMode,
            isNeverMode: this.isNeverMode,
            restAttributes: this.restAttributes
        })
    }
}
Scrollbar.defaultProps = ScrollbarPropsType;
