'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('./utils/index.js');
var TimePickerGrid_styles = require('./TimePickerGrid.styles.js');
var base$1 = require('./variations/_size/base.js');
var base = require('./variations/_view/base.js');
var base$2 = require('./variations/_disabled/base.js');
var TimeColumn = require('./ui/TimeColumn/TimeColumn.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["value", "view", "size", "disabled", "dropdownWidth", "dropdownHeight", "format", "min", "max", "columnsQuantity", "disabledValues", "multiplicityMinutes", "multiplicitySeconds", "onChange"];

// changes to start tests

var timePickerGridRoot = function timePickerGridRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    var _Object$values$;
    var outerValue = _ref.value,
      view = _ref.view,
      size = _ref.size,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      dropdownWidth = _ref.dropdownWidth,
      dropdownHeight = _ref.dropdownHeight,
      _ref$format = _ref.format,
      format = _ref$format === void 0 ? 'HH:mm' : _ref$format,
      min = _ref.min,
      max = _ref.max,
      columnsQuantity = _ref.columnsQuantity,
      disabledValues = _ref.disabledValues,
      multiplicityMinutes = _ref.multiplicityMinutes,
      multiplicitySeconds = _ref.multiplicitySeconds,
      onChange = _ref.onChange,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var actualFormat = format || (columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm');
    var columnsConfig = React.useMemo(function () {
      return index.getColumnsFromFormat(actualFormat, multiplicityMinutes, multiplicitySeconds);
    }, [actualFormat, multiplicityMinutes, multiplicitySeconds]);
    var hoursColumnRef = React.useRef(null);
    var minutesColumnRef = React.useRef(null);
    var secondsColumnRef = React.useRef(null);
    var timeItemRefs = React.useRef({});
    var itemHeight = ((_Object$values$ = Object.values(timeItemRefs.current)[0]) === null || _Object$values$ === void 0 ? void 0 : _Object$values$.offsetHeight) || 0;
    var hoursScrollbarRef = React.useRef(null);
    var minutesScrollbarRef = React.useRef(null);
    var secondsScrollbarRef = React.useRef(null);
    var hoursThumbRef = React.useRef(null);
    var minutesThumbRef = React.useRef(null);
    var secondsThumbRef = React.useRef(null);
    var hoursHideTimeoutRef = React.useRef(null);
    var minutesHideTimeoutRef = React.useRef(null);
    var secondsHideTimeoutRef = React.useRef(null);
    var _useState = React.useState(outerValue || ''),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      innerTime = _useState2[0],
      setInnerTime = _useState2[1];
    var _useState3 = React.useState(0),
      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
      gap = _useState4[0],
      setGap = _useState4[1];
    var _useState5 = React.useState({
        isVisible: false,
        thumbHeight: 0,
        thumbPosition: 0,
        isDragging: false
      }),
      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
      hoursScrollbar = _useState6[0],
      setHoursScrollbar = _useState6[1];
    var _useState7 = React.useState({
        isVisible: false,
        thumbHeight: 0,
        thumbPosition: 0,
        isDragging: false
      }),
      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
      minutesScrollbar = _useState8[0],
      setMinutesScrollbar = _useState8[1];
    var _useState9 = React.useState({
        isVisible: false,
        thumbHeight: 0,
        thumbPosition: 0,
        isDragging: false
      }),
      _useState0 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
      secondsScrollbar = _useState0[0],
      setSecondsScrollbar = _useState0[1];
    var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
    var getActiveTime = function getActiveTime() {
      if (viewValue && columnsConfig.length > 0) {
        var timeValues = index.parseTimeString(viewValue, actualFormat);
        return {
          hours: timeValues.hh,
          minutes: timeValues.mm !== null ? index.roundToMultiplicity(timeValues.mm, multiplicityMinutes) : null,
          seconds: timeValues.ss !== null ? index.roundToMultiplicity(timeValues.ss, multiplicitySeconds) : null
        };
      }
      return {
        hours: null,
        minutes: null,
        seconds: null
      };
    };
    var activeTime = getActiveTime();
    var _useState1 = React.useState(null),
      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState1, 2),
      currentColumn = _useState10[0],
      setCurrentColumn = _useState10[1];
    var getDisabledValuesForColumn = React.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 = index.parseTimeString(viewValue || '00:00:00', actualFormat);
        for (var i = 0; i < (columnType === 'hours' ? 24 : 60); i++) {
          var isItemDisabled = false;

          // last valid multiple for boundary checks (e.g. step=10 → 50, not 59)
          var ssStep = multiplicitySeconds !== null && multiplicitySeconds !== void 0 ? multiplicitySeconds : 1;
          var mmStep = multiplicityMinutes !== null && multiplicityMinutes !== void 0 ? multiplicityMinutes : 1;
          var lastValidSS = Math.floor(59 / ssStep) * ssStep;
          var lastValidMM = Math.floor(59 / mmStep) * mmStep;
          if (columnType === 'hours') {
            // hour i is disabled only if no selectable (i:mm:ss) exists in [min, max]
            var latestInHour = getCompleteTimeValues({
              hh: i,
              mm: lastValidMM,
              ss: lastValidSS
            }, actualFormat);
            var earliestInHour = getCompleteTimeValues({
              hh: i,
              mm: 0,
              ss: 0
            }, actualFormat);
            if (index.isTimeDisabled(latestInHour, min, undefined, format)) {
              isItemDisabled = true;
            } else if (index.isTimeDisabled(earliestInHour, undefined, max, format)) {
              isItemDisabled = true;
            }
          } else if (columnType === 'minutes') {
            var _timeValues$hh;
            // minute i is disabled only if no selectable (hh:i:ss) exists in [min, max]
            var currentHH = (_timeValues$hh = timeValues.hh) !== null && _timeValues$hh !== void 0 ? _timeValues$hh : 0;
            var latestInMinute = getCompleteTimeValues({
              hh: currentHH,
              mm: i,
              ss: lastValidSS
            }, actualFormat);
            var earliestInMinute = getCompleteTimeValues({
              hh: currentHH,
              mm: i,
              ss: 0
            }, actualFormat);
            if (index.isTimeDisabled(latestInMinute, min, undefined, format)) {
              isItemDisabled = true;
            } else if (index.isTimeDisabled(earliestInMinute, undefined, max, format)) {
              isItemDisabled = true;
            }
          } else {
            // seconds: exact check against current hh:mm
            var testValues = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, timeValues), {}, {
              ss: i
            });
            var completeTimeValues = getCompleteTimeValues(testValues, actualFormat);
            isItemDisabled = index.isTimeDisabled(completeTimeValues, min, max, format);
          }
          if (isItemDisabled) {
            disabledFromMinMax.push(i);
          }
        }
      }
      var normalizedDisabledFromProps = disabledFromProps.map(function (val) {
        return typeof val === 'string' ? parseInt(val, 10) : val;
      });
      return _rollupPluginBabelHelpers.toConsumableArray(new Set([].concat(_rollupPluginBabelHelpers.toConsumableArray(normalizedDisabledFromProps), disabledFromMinMax)));
    }, [disabledValues, min, max, viewValue, actualFormat, multiplicityMinutes, multiplicitySeconds]);
    var getCompleteTimeValues = React.useCallback(function (timeValues, fmt) {
      var completeValues = {
        hh: 0,
        mm: 0,
        ss: 0
      };
      if (fmt.includes('HH')) {
        completeValues.hh = timeValues.hh !== null ? timeValues.hh : 0;
      }
      if (fmt.includes('mm')) {
        completeValues.mm = timeValues.mm !== null ? timeValues.mm : 0;
      }
      if (fmt.includes('ss')) {
        completeValues.ss = timeValues.ss !== null ? timeValues.ss : 0;
      }
      return completeValues;
    }, []);
    var getNextAvailableValue = React.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 = React.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 = React.useCallback(function (setScrollbar, timeoutRef, columnRef) {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      updateScrollbar(columnRef, setScrollbar, true);
      timeoutRef.current = setTimeout(function () {
        setScrollbar(function (prev) {
          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
            isVisible: false
          });
        });
        timeoutRef.current = null;
      }, 2000);
    }, []);
    var updateScrollbar = React.useCallback(function (columnRef, setScrollbar) {
      var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      if (!columnRef.current) return;
      var _calculateScrollbar = calculateScrollbar(columnRef),
        thumbHeight = _calculateScrollbar.thumbHeight,
        thumbPosition = _calculateScrollbar.thumbPosition;
      setScrollbar(function (prev) {
        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
          thumbHeight: thumbHeight,
          thumbPosition: thumbPosition,
          isVisible: show || prev.isVisible
        });
      });
    }, [calculateScrollbar]);
    var handleColumnScroll = React.useCallback(function (columnRef, setScrollbar, timeoutRef) {
      showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
    }, [showScrollbarWithDelay]);
    var createScrollbarDragHandler = React.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$current2 = columnRef.current,
          scrollHeight = _columnRef$current2.scrollHeight,
          clientHeight = _columnRef$current2.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
              thumbPosition: newThumbPosition,
              isDragging: true,
              isVisible: true
            });
          });
        };
        var handleMouseUp = function handleMouseUp() {
          document.removeEventListener('mousemove', handleMouseMove);
          document.removeEventListener('mouseup', handleMouseUp);
          setScrollbar(function (prev) {
            return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
              isDragging: false
            });
          });
          showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
        };
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
      };
    }, [showScrollbarWithDelay]);
    var handleContainerFocus = React.useCallback(function () {
      if (currentColumn === null && columnsConfig.length > 0) {
        var firstColumn = columnsConfig[0].type;
        setCurrentColumn(function (prev) {
          return prev !== currentColumn ? firstColumn : currentColumn;
        });
      }
    }, [currentColumn, columnsConfig]);

    /**
     * Возвращает первое не отключённое значение из колонки с учётом кратности.
     * Итерируем по фактическим значениям колонки (columnsConfig), а не по 0..23/59.
     */
    var getFirstAvailableValue = React.useCallback(function (columnType) {
      var _columnsConfig$find$v, _columnsConfig$find;
      var disabledForColumn = getDisabledValuesForColumn(columnType);
      var columnValues = (_columnsConfig$find$v = (_columnsConfig$find = columnsConfig.find(function (c) {
        return c.type === columnType;
      })) === null || _columnsConfig$find === void 0 ? void 0 : _columnsConfig$find.values) !== null && _columnsConfig$find$v !== void 0 ? _columnsConfig$find$v : [];
      var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(columnValues),
        _step;
      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var val = _step.value;
          var num = parseInt(val, 10);
          if (!disabledForColumn.includes(num)) {
            return num;
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
      return 0;
    }, [getDisabledValuesForColumn, columnsConfig]);
    var handleTimeItemClick = function handleTimeItemClick(value, column) {
      /**
       * Применяем выбранное значение к соответствующей колонке
       */
      var newTimeValues = _rollupPluginBabelHelpers.objectSpread2({}, index.parseTimeString(viewValue, actualFormat));
      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;
      }

      /**
       * Незаполненные колонки получают первое доступное значение с учётом кратности
       */
      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');
      }

      /**
       * Автокоррекция зависимых колонок при выходе за границы min/max.
       * Секунды не требуют коррекции — пользователь выбрал точное значение.
       */
      if ((min || max) && column !== 'seconds') {
        var minParsed = index.parseTimeBoundary(min, format || 'HH:mm:ss');
        var maxParsed = index.parseTimeBoundary(max, format || 'HH:mm:ss');
        var total = index.toTotalSeconds(newTimeValues);
        if (minParsed && total < index.toTotalSeconds(minParsed)) {
          Object.assign(newTimeValues, index.clampTimeToMin(newTimeValues, minParsed, column, actualFormat, multiplicityMinutes !== null && multiplicityMinutes !== void 0 ? multiplicityMinutes : 1, multiplicitySeconds !== null && multiplicitySeconds !== void 0 ? multiplicitySeconds : 1));
        } else if (maxParsed && total > index.toTotalSeconds(maxParsed)) {
          Object.assign(newTimeValues, index.clampTimeToMax(newTimeValues, maxParsed, column, actualFormat, multiplicityMinutes !== null && multiplicityMinutes !== void 0 ? multiplicityMinutes : 1, multiplicitySeconds !== null && multiplicitySeconds !== void 0 ? multiplicitySeconds : 1));
        }
      }

      /**
       * Если время всё равно вне диапазона — отклоняем клик
       */
      if (index.isTimeDisabled(getCompleteTimeValues(newTimeValues, actualFormat), min, max)) {
        return;
      }

      /**
       * Фиксируем новое время
       */
      var newTimeString = index.buildTimeString(newTimeValues, actualFormat);
      setInnerTime(newTimeString);
      onChange === null || onChange === 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 _newValue = newIndex.toString().padStart(2, '0');
            var _element = timeItemRefs.current["".concat(column, "-").concat(_newValue)];
            setTimeout(function () {
              if (_element) {
                _element.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$column2;
            setCurrentColumn(newColumn);
            var _newValue3 = (((_activeTime$column2 = activeTime[column]) === null || _activeTime$column2 === void 0 ? void 0 : _activeTime$column2.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;
      }
    };
    React.useEffect(function () {
      if (currentColumn && currentColumn !== null) {
        var _activeTime$currentCo;
        var column = currentColumn;
        var value = (_activeTime$currentCo = activeTime[currentColumn]) === null || _activeTime$currentCo === void 0 ? void 0 : _activeTime$currentCo.toString().padStart(2, '0');
        var element = timeItemRefs.current["".concat(column, "-").concat(value)];
        setTimeout(function () {
          if (element) {
            element.focus();
          }
        }, 0);
      }
    }, [currentColumn]);
    React.useEffect(function () {
      return function () {
        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
          if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
          }
        });
      };
    }, []);
    React.useEffect(function () {
      if (hoursColumnRef.current) {
        var computedStyle = getComputedStyle(hoursColumnRef.current);
        var gapValue = parseFloat(computedStyle.gap || '0');
        setGap(gapValue);
      }
    }, [hoursColumnRef.current]);
    React.useEffect(function () {
      setTimeout(function () {
        updateScrollbar(hoursColumnRef, setHoursScrollbar);
        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
        if (columnsQuantity === 3) {
          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
        }
      }, 100);
    }, [columnsQuantity]);
    React.useEffect(function () {
      if (itemHeight === 0) return;
      var scrollToActiveItem = function scrollToActiveItem(columnRef, index$1) {
        if (columnRef.current && index$1 !== null) {
          var scrollPosition = index$1 * (itemHeight + gap);
          index.animateScrollTo(columnRef.current, scrollPosition);
          setTimeout(function () {
            updateScrollbar(columnRef, setHoursScrollbar);
          }, 300);
        }
      };
      var minutesIndex = activeTime.minutes !== null ? activeTime.minutes / (multiplicityMinutes !== null && multiplicityMinutes !== void 0 ? multiplicityMinutes : 1) : null;
      var secondsIndex = activeTime.seconds !== null ? activeTime.seconds / (multiplicitySeconds !== null && multiplicitySeconds !== void 0 ? multiplicitySeconds : 1) : null;
      scrollToActiveItem(hoursColumnRef, activeTime.hours);
      scrollToActiveItem(minutesColumnRef, minutesIndex);
      scrollToActiveItem(secondsColumnRef, secondsIndex);
    }, [activeTime.hours, activeTime.minutes, activeTime.seconds, itemHeight, gap, multiplicityMinutes, multiplicitySeconds]);
    React.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);
        }
      };
    }, []);
    React.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__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      ref: ref,
      view: view,
      size: size,
      disabled: disabled,
      onFocus: handleContainerFocus
    }, rest), /*#__PURE__*/React__default.default.createElement(TimePickerGrid_styles.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 TimeColumn.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
      });
    })));
  });
};
var timePickerGridConfig = {
  name: 'TimePickerGrid',
  tag: 'div',
  layout: timePickerGridRoot,
  base: TimePickerGrid_styles.base,
  variations: {
    view: {
      css: base.base
    },
    size: {
      css: base$1.base
    },
    disabled: {
      css: base$2.base,
      attrs: true
    }
  },
  defaults: {
    size: 'm',
    view: 'default'
  }
};

exports.timePickerGridConfig = timePickerGridConfig;
exports.timePickerGridRoot = timePickerGridRoot;
