function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _array_without_holes(arr) {
    if (Array.isArray(arr)) return _array_like_to_array(arr);
}
function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _iterable_to_array(iter) {
    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _non_iterable_spread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
    for(var i = 1; i < arguments.length; i++){
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function(key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
    if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);
        if (enumerableOnly) {
            symbols = symbols.filter(function(sym) {
                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            });
        }
        keys.push.apply(keys, symbols);
    }
    return keys;
}
function _object_spread_props(target, source) {
    source = source != null ? source : {};
    if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
        ownKeys(Object(source)).forEach(function(key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
    }
    return target;
}
function _object_without_properties(source, excluded) {
    if (source == null) return {};
    var target = {}, sourceKeys, key, i;
    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
        sourceKeys = Reflect.ownKeys(source);
        for(i = 0; i < sourceKeys.length; i++){
            key = sourceKeys[i];
            if (excluded.indexOf(key) >= 0) continue;
            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
            target[key] = source[key];
        }
        return target;
    }
    target = _object_without_properties_loose(source, excluded);
    if (Object.getOwnPropertySymbols) {
        sourceKeys = Object.getOwnPropertySymbols(source);
        for(i = 0; i < sourceKeys.length; i++){
            key = sourceKeys[i];
            if (excluded.indexOf(key) >= 0) continue;
            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
            target[key] = source[key];
        }
    }
    return target;
}
function _object_without_properties_loose(source, excluded) {
    if (source == null) return {};
    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
    for(i = 0; i < sourceKeys.length; i++){
        key = sourceKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
        target[key] = source[key];
    }
    return target;
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _to_array(arr) {
    return _array_with_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_rest();
}
function _to_consumable_array(arr) {
    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import React, { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from "react";
import { animateScrollTo, getColumnsFromFormat, parseTimeString, buildTimeString, isTimeDisabled } from "./utils";
import { base, StyledTimePicker } from "./TimePickerGrid.styles";
import { base as sizeCSS } from "./variations/_size/base";
import { base as viewCSS } from "./variations/_view/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { renderTimeColumn } from "./ui/TimeColumn/TimeColumn";
export var timePickerGridRoot = function timePickerGridRoot(Root) {
    return /*#__PURE__*/ forwardRef(function(_0, _1) {
        var _ref = [
            _0,
            _1
        ], _ref1 = _to_array(_ref), _ref2 = _ref1[0], _rest = _ref1.slice(1), outerValue = _ref2.value, view = _ref2.view, size = _ref2.size, _ref_disabled = _ref2.disabled, disabled = _ref_disabled === void 0 ? false : _ref_disabled, dropdownWidth = _ref2.dropdownWidth, dropdownHeight = _ref2.dropdownHeight, _ref_format = _ref2.format, format = _ref_format === void 0 ? 'HH:mm' : _ref_format, min = _ref2.min, max = _ref2.max, columnsQuantity = _ref2.columnsQuantity, disabledValues = _ref2.disabledValues, onChange = _ref2.onChange, rest = _object_without_properties(_ref2, [
            "value",
            "view",
            "size",
            "disabled",
            "dropdownWidth",
            "dropdownHeight",
            "format",
            "min",
            "max",
            "columnsQuantity",
            "disabledValues",
            "onChange"
        ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
        var _Object_values_;
        var actualFormat = format || (columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm');
        var columnsConfig = useMemo(function() {
            return getColumnsFromFormat(actualFormat);
        }, [
            actualFormat
        ]);
        var hoursColumnRef = useRef(null);
        var minutesColumnRef = useRef(null);
        var secondsColumnRef = useRef(null);
        var timeItemRefs = useRef({});
        var itemHeight = ((_Object_values_ = Object.values(timeItemRefs.current)[0]) === null || _Object_values_ === void 0 ? void 0 : _Object_values_.offsetHeight) || 0;
        var hoursScrollbarRef = useRef(null);
        var minutesScrollbarRef = useRef(null);
        var secondsScrollbarRef = useRef(null);
        var hoursThumbRef = useRef(null);
        var minutesThumbRef = useRef(null);
        var secondsThumbRef = useRef(null);
        var hoursHideTimeoutRef = useRef(null);
        var minutesHideTimeoutRef = useRef(null);
        var secondsHideTimeoutRef = useRef(null);
        var _useState = _sliced_to_array(useState(outerValue || ''), 2), innerTime = _useState[0], setInnerTime = _useState[1];
        var _useState1 = _sliced_to_array(useState(0), 2), gap = _useState1[0], setGap = _useState1[1];
        var _useState2 = _sliced_to_array(useState({
            isVisible: false,
            thumbHeight: 0,
            thumbPosition: 0,
            isDragging: false
        }), 2), hoursScrollbar = _useState2[0], setHoursScrollbar = _useState2[1];
        var _useState3 = _sliced_to_array(useState({
            isVisible: false,
            thumbHeight: 0,
            thumbPosition: 0,
            isDragging: false
        }), 2), minutesScrollbar = _useState3[0], setMinutesScrollbar = _useState3[1];
        var _useState4 = _sliced_to_array(useState({
            isVisible: false,
            thumbHeight: 0,
            thumbPosition: 0,
            isDragging: false
        }), 2), secondsScrollbar = _useState4[0], setSecondsScrollbar = _useState4[1];
        var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
        var getActiveTime = function getActiveTime() {
            if (viewValue && columnsConfig.length > 0) {
                var timeValues = parseTimeString(viewValue, actualFormat);
                return {
                    hours: timeValues.hh,
                    minutes: timeValues.mm,
                    seconds: timeValues.ss
                };
            }
            return {
                hours: null,
                minutes: null,
                seconds: null
            };
        };
        var activeTime = getActiveTime();
        var _useState5 = _sliced_to_array(useState(null), 2), currentColumn = _useState5[0], setCurrentColumn = _useState5[1];
        var getDisabledValuesForColumn = useCallback(function(columnType) {
            var disabledFromProps;
            if (columnType === 'hours') {
                disabledFromProps = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.hour) || [];
            } else if (columnType === 'minutes') {
                disabledFromProps = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.minute) || [];
            } else {
                disabledFromProps = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.second) || [];
            }
            var disabledFromMinMax = [];
            if (min || max) {
                var timeValues = parseTimeString(viewValue || '00:00:00', actualFormat);
                for(var i = 0; i < (columnType === 'hours' ? 24 : 60); i++){
                    var testValues = _object_spread({}, timeValues);
                    if (columnType === 'hours') {
                        testValues.hh = i;
                    } else if (columnType === 'minutes') {
                        testValues.mm = i;
                    } else {
                        testValues.ss = i;
                    }
                    var completeTimeValues = getCompleteTimeValues(testValues, actualFormat);
                    if (isTimeDisabled(completeTimeValues, min, max, format)) {
                        disabledFromMinMax.push(i);
                    }
                }
            }
            var normalizedDisabledFromProps = disabledFromProps.map(function(val) {
                return typeof val === 'string' ? parseInt(val, 10) : val;
            });
            return _to_consumable_array(new Set(_to_consumable_array(normalizedDisabledFromProps).concat(_to_consumable_array(disabledFromMinMax))));
        }, [
            disabledValues,
            min,
            max,
            viewValue,
            actualFormat
        ]);
        var getCompleteTimeValues = useCallback(function(timeValues, format) {
            var completeValues = {
                hh: 0,
                mm: 0,
                ss: 0
            };
            if (format.includes('HH')) {
                completeValues.hh = timeValues.hh !== null ? timeValues.hh : 0;
            }
            if (format.includes('mm')) {
                completeValues.mm = timeValues.mm !== null ? timeValues.mm : 0;
            }
            if (format.includes('ss')) {
                completeValues.ss = timeValues.ss !== null ? timeValues.ss : 0;
            }
            return completeValues;
        }, []);
        var getNextAvailableValue = useCallback(function(currentIndex, values, disabledValuesForColumn, direction) {
            var newIndex = currentIndex;
            var iterations = 0;
            var maxIterations = values.length;
            do {
                newIndex = direction === 'up' ? (newIndex - 1 + values.length) % values.length : (newIndex + 1) % values.length;
                iterations++;
            }while (iterations < maxIterations && disabledValuesForColumn.includes(parseInt(values[newIndex], 10)) && newIndex !== currentIndex);
            return iterations < maxIterations && !disabledValuesForColumn.includes(parseInt(values[newIndex], 10)) ? newIndex : currentIndex;
        }, []);
        var minScrollbarTrackHeight = 20;
        var calculateScrollbar = useCallback(function(columnRef) {
            if (!columnRef.current) return {
                thumbHeight: 0,
                thumbPosition: 0
            };
            var _columnRef_current = columnRef.current, scrollTop = _columnRef_current.scrollTop, scrollHeight = _columnRef_current.scrollHeight, clientHeight = _columnRef_current.clientHeight;
            var trackHeight = clientHeight;
            var thumbHeight = Math.max(trackHeight / scrollHeight * trackHeight, minScrollbarTrackHeight);
            var maxScroll = scrollHeight - clientHeight;
            var thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
            return {
                thumbHeight: thumbHeight,
                thumbPosition: thumbPosition
            };
        }, []);
        var showScrollbarWithDelay = useCallback(function(setScrollbar, timeoutRef, columnRef) {
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
            updateScrollbar(columnRef, setScrollbar, true);
            timeoutRef.current = setTimeout(function() {
                setScrollbar(function(prev) {
                    return _object_spread_props(_object_spread({}, prev), {
                        isVisible: false
                    });
                });
                timeoutRef.current = null;
            }, 2000);
        }, []);
        var updateScrollbar = useCallback(function(columnRef, setScrollbar) {
            var show = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
            if (!columnRef.current) return;
            var _calculateScrollbar = calculateScrollbar(columnRef), thumbHeight = _calculateScrollbar.thumbHeight, thumbPosition = _calculateScrollbar.thumbPosition;
            setScrollbar(function(prev) {
                return _object_spread_props(_object_spread({}, prev), {
                    thumbHeight: thumbHeight,
                    thumbPosition: thumbPosition,
                    isVisible: show || prev.isVisible
                });
            });
        }, [
            calculateScrollbar
        ]);
        var handleColumnScroll = useCallback(function(columnRef, setScrollbar, timeoutRef) {
            showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
        }, [
            showScrollbarWithDelay
        ]);
        var createScrollbarDragHandler = useCallback(function(columnRef, setScrollbar, timeoutRef) {
            return function(e) {
                e.preventDefault();
                var thumb = e.currentTarget;
                var track = thumb.parentElement;
                if (!columnRef.current || !track) return;
                if (timeoutRef.current) {
                    clearTimeout(timeoutRef.current);
                    timeoutRef.current = null;
                }
                var startY = e.clientY;
                var startThumbPosition = parseFloat(thumb.style.top || '0');
                var trackRect = track.getBoundingClientRect();
                var trackHeight = trackRect.height;
                var thumbHeight = thumb.offsetHeight;
                var _columnRef_current = columnRef.current, scrollHeight = _columnRef_current.scrollHeight, clientHeight = _columnRef_current.clientHeight;
                var maxScroll = scrollHeight - clientHeight;
                var handleMouseMove = function handleMouseMove(moveEvent) {
                    var deltaY = moveEvent.clientY - startY;
                    var newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, startThumbPosition + deltaY));
                    var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
                    var newScrollTop = scrollPercentage * maxScroll;
                    if (columnRef.current) {
                        columnRef.current.scrollTop = newScrollTop;
                    }
                    setScrollbar(function(prev) {
                        return _object_spread_props(_object_spread({}, prev), {
                            thumbPosition: newThumbPosition,
                            isDragging: true,
                            isVisible: true
                        });
                    });
                };
                var handleMouseUp = function handleMouseUp1() {
                    document.removeEventListener('mousemove', handleMouseMove);
                    document.removeEventListener('mouseup', handleMouseUp);
                    setScrollbar(function(prev) {
                        return _object_spread_props(_object_spread({}, prev), {
                            isDragging: false
                        });
                    });
                    showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
                };
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
            };
        }, [
            showScrollbarWithDelay
        ]);
        var handleContainerFocus = useCallback(function() {
            if (currentColumn === null && columnsConfig.length > 0) {
                var firstColumn = columnsConfig[0].type;
                setCurrentColumn(function(prev) {
                    return prev !== currentColumn ? firstColumn : currentColumn;
                });
            }
        }, [
            currentColumn,
            columnsConfig
        ]);
        var handleTimeItemClick = function handleTimeItemClick(value, column) {
            var currentTimeValues = parseTimeString(viewValue, actualFormat);
            var newTimeValues = _object_spread({}, currentTimeValues);
            switch(column){
                case 'hours':
                    newTimeValues.hh = parseInt(value, 10);
                    break;
                case 'minutes':
                    newTimeValues.mm = parseInt(value, 10);
                    break;
                case 'seconds':
                    newTimeValues.ss = parseInt(value, 10);
                    break;
                default:
            }
            var getFirstAvailableValue = function getFirstAvailableValue(columnType) {
                var disabledValuesForColumn = getDisabledValuesForColumn(columnType);
                var maxValue = columnType === 'hours' ? 23 : 59;
                for(var i = 0; i <= maxValue; i++){
                    if (!disabledValuesForColumn.includes(i)) {
                        return i;
                    }
                }
                return 0;
            };
            if (newTimeValues.hh === null && actualFormat.includes('HH')) {
                newTimeValues.hh = getFirstAvailableValue('hours');
            }
            if (newTimeValues.mm === null && actualFormat.includes('mm')) {
                newTimeValues.mm = getFirstAvailableValue('minutes');
            }
            if (newTimeValues.ss === null && actualFormat.includes('ss')) {
                newTimeValues.ss = getFirstAvailableValue('seconds');
            }
            var completeTimeValues = getCompleteTimeValues(newTimeValues, actualFormat);
            if (isTimeDisabled(completeTimeValues, min, max)) {
                return;
            }
            var newTimeString = buildTimeString(newTimeValues, actualFormat);
            setInnerTime(newTimeString);
            onChange === null || onChange === void 0 ? void 0 : onChange({
                value: newTimeString,
                timeValues: {
                    hour: newTimeValues.hh || undefined,
                    minute: newTimeValues.mm || undefined,
                    second: newTimeValues.ss || undefined
                }
            });
        };
        var handleTimeItemKeyDown = function handleTimeItemKeyDown(event, column, value) {
            var disabledValuesForColumn = getDisabledValuesForColumn(column);
            var currentIndex = parseInt(value, 10);
            var newIndex = null;
            var newColumn = column;
            switch(event.key){
                case 'ArrowUp':
                    event.preventDefault();
                    newIndex = getNextAvailableValue(currentIndex, column === 'hours' ? Array.from({
                        length: 24
                    }, function(_, i) {
                        return i.toString().padStart(2, '0');
                    }) : Array.from({
                        length: 60
                    }, function(_, i) {
                        return i.toString().padStart(2, '0');
                    }), disabledValuesForColumn, 'up');
                    if (newIndex !== null) {
                        var newValue = newIndex.toString().padStart(2, '0');
                        var element = timeItemRefs.current["".concat(column, "-").concat(newValue)];
                        setTimeout(function() {
                            if (element) {
                                element.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'ArrowDown':
                    event.preventDefault();
                    newIndex = getNextAvailableValue(currentIndex, column === 'hours' ? Array.from({
                        length: 24
                    }, function(_, i) {
                        return i.toString().padStart(2, '0');
                    }) : Array.from({
                        length: 60
                    }, function(_, i) {
                        return i.toString().padStart(2, '0');
                    }), disabledValuesForColumn, 'down');
                    if (newIndex !== null) {
                        var newValue1 = newIndex.toString().padStart(2, '0');
                        var element1 = timeItemRefs.current["".concat(column, "-").concat(newValue1)];
                        setTimeout(function() {
                            if (element1) {
                                element1.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'ArrowRight':
                    event.preventDefault();
                    if (column === 'hours') {
                        newColumn = 'minutes';
                    } else if (column === 'minutes' && actualFormat.includes('ss')) {
                        newColumn = 'seconds';
                    }
                    if (newColumn !== column) {
                        var _activeTime_column;
                        setCurrentColumn(newColumn);
                        var newValue2 = (((_activeTime_column = activeTime[column]) === null || _activeTime_column === void 0 ? void 0 : _activeTime_column.toString()) || '0').padStart(2, '0');
                        var element2 = timeItemRefs.current["".concat(newColumn, "-").concat(newValue2)];
                        setTimeout(function() {
                            if (element2) {
                                element2.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'ArrowLeft':
                    event.preventDefault();
                    if (column === 'minutes') {
                        newColumn = 'hours';
                    } else if (column === 'seconds') {
                        newColumn = 'minutes';
                    }
                    if (newColumn !== column) {
                        var _activeTime_column1;
                        setCurrentColumn(newColumn);
                        var newValue3 = (((_activeTime_column1 = activeTime[column]) === null || _activeTime_column1 === void 0 ? void 0 : _activeTime_column1.toString()) || '0').padStart(2, '0');
                        var element3 = timeItemRefs.current["".concat(newColumn, "-").concat(newValue3)];
                        setTimeout(function() {
                            if (element3) {
                                element3.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'Enter':
                case ' ':
                    event.preventDefault();
                    handleTimeItemClick(value, column);
                    break;
                case 'Home':
                    event.preventDefault();
                    newIndex = 0;
                    while(disabledValuesForColumn.includes(newIndex) && newIndex < (column === 'hours' ? 24 : 60)){
                        newIndex++;
                    }
                    if (newIndex < (column === 'hours' ? 24 : 60)) {
                        var newValue4 = newIndex.toString().padStart(2, '0');
                        var element4 = timeItemRefs.current["".concat(column, "-").concat(newValue4)];
                        setTimeout(function() {
                            if (element4) {
                                element4.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'End':
                    event.preventDefault();
                    newIndex = column === 'hours' ? 23 : 59;
                    while(disabledValuesForColumn.includes(newIndex) && newIndex >= 0){
                        newIndex--;
                    }
                    if (newIndex >= 0) {
                        var newValue5 = newIndex.toString().padStart(2, '0');
                        var element5 = timeItemRefs.current["".concat(column, "-").concat(newValue5)];
                        setTimeout(function() {
                            if (element5) {
                                element5.focus();
                            }
                        }, 0);
                    }
                    break;
                default:
                    break;
            }
        };
        useEffect(function() {
            if (currentColumn && currentColumn !== null) {
                var _activeTime_currentColumn;
                var column = currentColumn;
                var value = (_activeTime_currentColumn = activeTime[currentColumn]) === null || _activeTime_currentColumn === void 0 ? void 0 : _activeTime_currentColumn.toString().padStart(2, '0');
                var element = timeItemRefs.current["".concat(column, "-").concat(value)];
                setTimeout(function() {
                    if (element) {
                        element.focus();
                    }
                }, 0);
            }
        }, [
            currentColumn
        ]);
        useEffect(function() {
            return function() {
                [
                    hoursHideTimeoutRef,
                    minutesHideTimeoutRef,
                    secondsHideTimeoutRef
                ].forEach(function(timeoutRef) {
                    if (timeoutRef.current) {
                        clearTimeout(timeoutRef.current);
                    }
                });
            };
        }, []);
        useEffect(function() {
            if (hoursColumnRef.current) {
                var computedStyle = getComputedStyle(hoursColumnRef.current);
                var gapValue = parseFloat(computedStyle.gap || '0');
                setGap(gapValue);
            }
        }, [
            hoursColumnRef.current
        ]);
        useEffect(function() {
            setTimeout(function() {
                updateScrollbar(hoursColumnRef, setHoursScrollbar);
                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
                if (columnsQuantity === 3) {
                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
                }
            }, 100);
        }, [
            columnsQuantity
        ]);
        useEffect(function() {
            if (itemHeight === 0) return;
            var scrollToActiveItem = function scrollToActiveItem(columnRef, index) {
                if (columnRef.current && index !== null) {
                    var scrollPosition = index * (itemHeight + gap);
                    animateScrollTo(columnRef.current, scrollPosition);
                    setTimeout(function() {
                        updateScrollbar(columnRef, setHoursScrollbar);
                    }, 300);
                }
            };
            scrollToActiveItem(hoursColumnRef, activeTime.hours);
            scrollToActiveItem(minutesColumnRef, activeTime.minutes);
            scrollToActiveItem(secondsColumnRef, activeTime.seconds);
        }, [
            activeTime.hours,
            activeTime.minutes,
            activeTime.seconds,
            itemHeight,
            gap
        ]);
        useEffect(function() {
            var hoursColumn = hoursColumnRef.current;
            var minutesColumn = minutesColumnRef.current;
            var secondsColumn = secondsColumnRef.current;
            var handleHoursScroll = function handleHoursScroll() {
                return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
            };
            var handleMinutesScroll = function handleMinutesScroll() {
                return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
            };
            var handleSecondsScroll = function handleSecondsScroll() {
                return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
            };
            if (hoursColumn) {
                hoursColumn.addEventListener('scroll', handleHoursScroll);
            }
            if (minutesColumn) {
                minutesColumn.addEventListener('scroll', handleMinutesScroll);
            }
            if (secondsColumn) {
                secondsColumn.addEventListener('scroll', handleSecondsScroll);
            }
            return function() {
                if (hoursColumn) {
                    hoursColumn.removeEventListener('scroll', handleHoursScroll);
                }
                if (minutesColumn) {
                    minutesColumn.removeEventListener('scroll', handleMinutesScroll);
                }
                if (secondsColumn) {
                    secondsColumn.removeEventListener('scroll', handleSecondsScroll);
                }
            };
        }, []);
        useEffect(function() {
            var hoursColumn = hoursColumnRef.current;
            var minutesColumn = minutesColumnRef.current;
            var secondsColumn = secondsColumnRef.current;
            var handleHoursMouseEnter = function handleHoursMouseEnter() {
                return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
            };
            var handleMinutesMouseEnter = function handleMinutesMouseEnter() {
                return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
            };
            var handleSecondsMouseEnter = function handleSecondsMouseEnter() {
                return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
            };
            if (hoursColumn) {
                hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
            }
            if (minutesColumn) {
                minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
            }
            if (secondsColumn) {
                secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
            }
            return function() {
                if (hoursColumn) {
                    hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
                }
                if (minutesColumn) {
                    minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
                }
                if (secondsColumn) {
                    secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
                }
            };
        }, []);
        return /*#__PURE__*/ React.createElement(Root, _object_spread({
            ref: ref,
            view: view,
            size: size,
            disabled: disabled,
            onFocus: handleContainerFocus
        }, rest), /*#__PURE__*/ React.createElement(StyledTimePicker, {
            width: dropdownWidth,
            tabIndex: -1
        }, columnsConfig.map(function(columnConfig) {
            var type = columnConfig.type, values = columnConfig.values;
            var columnRef;
            var scrollbarState;
            var setScrollbar;
            var scrollbarRef;
            var thumbRef;
            var timeoutRef;
            switch(type){
                case 'hours':
                    columnRef = hoursColumnRef;
                    scrollbarState = hoursScrollbar;
                    setScrollbar = setHoursScrollbar;
                    scrollbarRef = hoursScrollbarRef;
                    thumbRef = hoursThumbRef;
                    timeoutRef = hoursHideTimeoutRef;
                    break;
                case 'minutes':
                    columnRef = minutesColumnRef;
                    scrollbarState = minutesScrollbar;
                    setScrollbar = setMinutesScrollbar;
                    scrollbarRef = minutesScrollbarRef;
                    thumbRef = minutesThumbRef;
                    timeoutRef = minutesHideTimeoutRef;
                    break;
                case 'seconds':
                    columnRef = secondsColumnRef;
                    scrollbarState = secondsScrollbar;
                    setScrollbar = setSecondsScrollbar;
                    scrollbarRef = secondsScrollbarRef;
                    thumbRef = secondsThumbRef;
                    timeoutRef = secondsHideTimeoutRef;
                    break;
                default:
                    return null;
            }
            return renderTimeColumn({
                values: values,
                disabledValues: getDisabledValuesForColumn(type),
                dropdownHeight: dropdownHeight,
                column: type,
                activeTime: activeTime,
                currentColumn: currentColumn,
                handleTimeItemClick: handleTimeItemClick,
                handleTimeItemKeyDown: handleTimeItemKeyDown,
                createScrollbarDragHandler: createScrollbarDragHandler,
                setScrollbar: setScrollbar,
                columnRef: columnRef,
                scrollbarState: scrollbarState,
                scrollbarRef: scrollbarRef,
                thumbRef: thumbRef,
                timeoutRef: timeoutRef,
                timeItemRefs: timeItemRefs
            });
        })));
    });
};
export var timePickerGridConfig = {
    name: 'TimePickerGrid',
    tag: 'div',
    layout: timePickerGridRoot,
    base: base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        size: 'm',
        view: 'default'
    }
};
