import React, { useEffect, useRef } from "react";
import { P2 } from "../../../typography";
import { ValueContainerStyle } from "./styles";
var SelectValueContainer = function (props) {
    var valueContainerRef = useRef(null);
    var handleWheel = function (event) {
        var _a;
        event.preventDefault();
        (_a = valueContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
            left: event.deltaY < 0 ? -30 : 30
        });
    };
    useEffect(function () {
        var valueContainer = valueContainerRef.current;
        valueContainer === null || valueContainer === void 0 ? void 0 : valueContainer.addEventListener("wheel", handleWheel, {
            passive: false
        });
        return function () { return valueContainer === null || valueContainer === void 0 ? void 0 : valueContainer.removeEventListener("wheel", handleWheel); };
    });
    return (React.createElement(ValueContainerStyle, { "data-element": "select-valueContainer", ref: valueContainerRef, size: props.selectProps.size, isMulti: props.isMulti, isHasValue: props.hasValue, isFocused: props.selectProps.menuIsOpen, isReadOnly: props.selectProps.isReadOnly, isDisabled: props.selectProps.isDisabled }, !props.hasValue && props.selectProps.isReadOnly ? (React.createElement(P2, { type: "corvus", className: "text-readonly" }, "\u041D\u0435 \u0437\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u043E")) : (props.children)));
};
export default SelectValueContainer;
