import React, { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from "react";
import { animateScrollTo, getColumnsFromFormat, parseTimeString, buildTimeString, isTimeDisabled, roundToMultiplicity, parseTimeBoundary, toTotalSeconds, clampTimeToMin, clampTimeToMax } 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 const timePickerGridRoot = (Root)=>/*#__PURE__*/ forwardRef(({ value: outerValue, view, size, disabled = false, dropdownWidth, dropdownHeight, format = 'HH:mm', min, max, columnsQuantity, disabledValues, multiplicityMinutes, multiplicitySeconds, onChange, ...rest }, ref)=>{
        const actualFormat = format || (columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm');
        const columnsConfig = useMemo(()=>getColumnsFromFormat(actualFormat, multiplicityMinutes, multiplicitySeconds), [
            actualFormat,
            multiplicityMinutes,
            multiplicitySeconds
        ]);
        const hoursColumnRef = useRef(null);
        const minutesColumnRef = useRef(null);
        const secondsColumnRef = useRef(null);
        const timeItemRefs = useRef({});
        const itemHeight = Object.values(timeItemRefs.current)[0]?.offsetHeight || 0;
        const hoursScrollbarRef = useRef(null);
        const minutesScrollbarRef = useRef(null);
        const secondsScrollbarRef = useRef(null);
        const hoursThumbRef = useRef(null);
        const minutesThumbRef = useRef(null);
        const secondsThumbRef = useRef(null);
        const hoursHideTimeoutRef = useRef(null);
        const minutesHideTimeoutRef = useRef(null);
        const secondsHideTimeoutRef = useRef(null);
        const [innerTime, setInnerTime] = useState(outerValue || '');
        const [gap, setGap] = useState(0);
        const [hoursScrollbar, setHoursScrollbar] = useState({
            isVisible: false,
            thumbHeight: 0,
            thumbPosition: 0,
            isDragging: false
        });
        const [minutesScrollbar, setMinutesScrollbar] = useState({
            isVisible: false,
            thumbHeight: 0,
            thumbPosition: 0,
            isDragging: false
        });
        const [secondsScrollbar, setSecondsScrollbar] = useState({
            isVisible: false,
            thumbHeight: 0,
            thumbPosition: 0,
            isDragging: false
        });
        const viewValue = outerValue ?? innerTime;
        const getActiveTime = ()=>{
            if (viewValue && columnsConfig.length > 0) {
                const timeValues = parseTimeString(viewValue, actualFormat);
                return {
                    hours: timeValues.hh,
                    minutes: timeValues.mm !== null ? roundToMultiplicity(timeValues.mm, multiplicityMinutes) : null,
                    seconds: timeValues.ss !== null ? roundToMultiplicity(timeValues.ss, multiplicitySeconds) : null
                };
            }
            return {
                hours: null,
                minutes: null,
                seconds: null
            };
        };
        const activeTime = getActiveTime();
        const [currentColumn, setCurrentColumn] = useState(null);
        const getDisabledValuesForColumn = useCallback((columnType)=>{
            let disabledFromProps;
            if (columnType === 'hours') {
                disabledFromProps = disabledValues?.hour || [];
            } else if (columnType === 'minutes') {
                disabledFromProps = disabledValues?.minute || [];
            } else {
                disabledFromProps = disabledValues?.second || [];
            }
            const disabledFromMinMax = [];
            if (min || max) {
                const timeValues = parseTimeString(viewValue || '00:00:00', actualFormat);
                for(let i = 0; i < (columnType === 'hours' ? 24 : 60); i++){
                    let isItemDisabled = false;
                    // last valid multiple for boundary checks (e.g. step=10 → 50, not 59)
                    const ssStep = multiplicitySeconds ?? 1;
                    const mmStep = multiplicityMinutes ?? 1;
                    const lastValidSS = Math.floor(59 / ssStep) * ssStep;
                    const lastValidMM = Math.floor(59 / mmStep) * mmStep;
                    if (columnType === 'hours') {
                        // hour i is disabled only if no selectable (i:mm:ss) exists in [min, max]
                        const latestInHour = getCompleteTimeValues({
                            hh: i,
                            mm: lastValidMM,
                            ss: lastValidSS
                        }, actualFormat);
                        const earliestInHour = getCompleteTimeValues({
                            hh: i,
                            mm: 0,
                            ss: 0
                        }, actualFormat);
                        if (isTimeDisabled(latestInHour, min, undefined, format)) {
                            isItemDisabled = true;
                        } else if (isTimeDisabled(earliestInHour, undefined, max, format)) {
                            isItemDisabled = true;
                        }
                    } else if (columnType === 'minutes') {
                        // minute i is disabled only if no selectable (hh:i:ss) exists in [min, max]
                        const currentHH = timeValues.hh ?? 0;
                        const latestInMinute = getCompleteTimeValues({
                            hh: currentHH,
                            mm: i,
                            ss: lastValidSS
                        }, actualFormat);
                        const earliestInMinute = getCompleteTimeValues({
                            hh: currentHH,
                            mm: i,
                            ss: 0
                        }, actualFormat);
                        if (isTimeDisabled(latestInMinute, min, undefined, format)) {
                            isItemDisabled = true;
                        } else if (isTimeDisabled(earliestInMinute, undefined, max, format)) {
                            isItemDisabled = true;
                        }
                    } else {
                        // seconds: exact check against current hh:mm
                        const testValues = {
                            ...timeValues,
                            ss: i
                        };
                        const completeTimeValues = getCompleteTimeValues(testValues, actualFormat);
                        isItemDisabled = isTimeDisabled(completeTimeValues, min, max, format);
                    }
                    if (isItemDisabled) {
                        disabledFromMinMax.push(i);
                    }
                }
            }
            const normalizedDisabledFromProps = disabledFromProps.map((val)=>typeof val === 'string' ? parseInt(val, 10) : val);
            return [
                ...new Set([
                    ...normalizedDisabledFromProps,
                    ...disabledFromMinMax
                ])
            ];
        }, [
            disabledValues,
            min,
            max,
            viewValue,
            actualFormat,
            multiplicityMinutes,
            multiplicitySeconds
        ]);
        const getCompleteTimeValues = useCallback((timeValues, fmt)=>{
            const 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;
        }, []);
        const getNextAvailableValue = useCallback((currentIndex, values, disabledValuesForColumn, direction)=>{
            let newIndex = currentIndex;
            let iterations = 0;
            const 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;
        }, []);
        const minScrollbarTrackHeight = 20;
        const calculateScrollbar = useCallback((columnRef)=>{
            if (!columnRef.current) return {
                thumbHeight: 0,
                thumbPosition: 0
            };
            const { scrollTop, scrollHeight, clientHeight } = columnRef.current;
            const trackHeight = clientHeight;
            const thumbHeight = Math.max(trackHeight / scrollHeight * trackHeight, minScrollbarTrackHeight);
            const maxScroll = scrollHeight - clientHeight;
            const thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
            return {
                thumbHeight,
                thumbPosition
            };
        }, []);
        const showScrollbarWithDelay = useCallback((setScrollbar, timeoutRef, columnRef)=>{
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
            updateScrollbar(columnRef, setScrollbar, true);
            timeoutRef.current = setTimeout(()=>{
                setScrollbar((prev)=>({
                        ...prev,
                        isVisible: false
                    }));
                timeoutRef.current = null;
            }, 2000);
        }, []);
        const updateScrollbar = useCallback((columnRef, setScrollbar, show = false)=>{
            if (!columnRef.current) return;
            const { thumbHeight, thumbPosition } = calculateScrollbar(columnRef);
            setScrollbar((prev)=>({
                    ...prev,
                    thumbHeight,
                    thumbPosition,
                    isVisible: show || prev.isVisible
                }));
        }, [
            calculateScrollbar
        ]);
        const handleColumnScroll = useCallback((columnRef, setScrollbar, timeoutRef)=>{
            showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
        }, [
            showScrollbarWithDelay
        ]);
        const createScrollbarDragHandler = useCallback((columnRef, setScrollbar, timeoutRef)=>(e)=>{
                e.preventDefault();
                const thumb = e.currentTarget;
                const track = thumb.parentElement;
                if (!columnRef.current || !track) return;
                if (timeoutRef.current) {
                    clearTimeout(timeoutRef.current);
                    timeoutRef.current = null;
                }
                const startY = e.clientY;
                const startThumbPosition = parseFloat(thumb.style.top || '0');
                const trackRect = track.getBoundingClientRect();
                const trackHeight = trackRect.height;
                const thumbHeight = thumb.offsetHeight;
                const { scrollHeight, clientHeight } = columnRef.current;
                const maxScroll = scrollHeight - clientHeight;
                const handleMouseMove = (moveEvent)=>{
                    const deltaY = moveEvent.clientY - startY;
                    const newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, startThumbPosition + deltaY));
                    const scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
                    const newScrollTop = scrollPercentage * maxScroll;
                    if (columnRef.current) {
                        columnRef.current.scrollTop = newScrollTop;
                    }
                    setScrollbar((prev)=>({
                            ...prev,
                            thumbPosition: newThumbPosition,
                            isDragging: true,
                            isVisible: true
                        }));
                };
                const handleMouseUp = ()=>{
                    document.removeEventListener('mousemove', handleMouseMove);
                    document.removeEventListener('mouseup', handleMouseUp);
                    setScrollbar((prev)=>({
                            ...prev,
                            isDragging: false
                        }));
                    showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
                };
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
            }, [
            showScrollbarWithDelay
        ]);
        const handleContainerFocus = useCallback(()=>{
            if (currentColumn === null && columnsConfig.length > 0) {
                const firstColumn = columnsConfig[0].type;
                setCurrentColumn((prev)=>prev !== currentColumn ? firstColumn : currentColumn);
            }
        }, [
            currentColumn,
            columnsConfig
        ]);
        /**
             * Возвращает первое не отключённое значение из колонки с учётом кратности.
             * Итерируем по фактическим значениям колонки (columnsConfig), а не по 0..23/59.
             */ const getFirstAvailableValue = useCallback((columnType)=>{
            const disabledForColumn = getDisabledValuesForColumn(columnType);
            const columnValues = columnsConfig.find((c)=>c.type === columnType)?.values ?? [];
            for (const val of columnValues){
                const num = parseInt(val, 10);
                if (!disabledForColumn.includes(num)) {
                    return num;
                }
            }
            return 0;
        }, [
            getDisabledValuesForColumn,
            columnsConfig
        ]);
        const handleTimeItemClick = (value, column)=>{
            /**
                 * Применяем выбранное значение к соответствующей колонке
                 */ const newTimeValues = {
                ...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;
                default:
            }
            /**
                 * Незаполненные колонки получают первое доступное значение с учётом кратности
                 */ 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') {
                const minParsed = parseTimeBoundary(min, format || 'HH:mm:ss');
                const maxParsed = parseTimeBoundary(max, format || 'HH:mm:ss');
                const total = toTotalSeconds(newTimeValues);
                if (minParsed && total < toTotalSeconds(minParsed)) {
                    Object.assign(newTimeValues, clampTimeToMin(newTimeValues, minParsed, column, actualFormat, multiplicityMinutes ?? 1, multiplicitySeconds ?? 1));
                } else if (maxParsed && total > toTotalSeconds(maxParsed)) {
                    Object.assign(newTimeValues, clampTimeToMax(newTimeValues, maxParsed, column, actualFormat, multiplicityMinutes ?? 1, multiplicitySeconds ?? 1));
                }
            }
            /**
                 * Если время всё равно вне диапазона — отклоняем клик
                 */ if (isTimeDisabled(getCompleteTimeValues(newTimeValues, actualFormat), min, max)) {
                return;
            }
            /**
                 * Фиксируем новое время
                 */ const newTimeString = buildTimeString(newTimeValues, actualFormat);
            setInnerTime(newTimeString);
            onChange?.({
                value: newTimeString,
                timeValues: {
                    hour: newTimeValues.hh || undefined,
                    minute: newTimeValues.mm || undefined,
                    second: newTimeValues.ss || undefined
                }
            });
        };
        const handleTimeItemKeyDown = (event, column, value)=>{
            const disabledValuesForColumn = getDisabledValuesForColumn(column);
            const currentIndex = parseInt(value, 10);
            let newIndex = null;
            let newColumn = column;
            switch(event.key){
                case 'ArrowUp':
                    event.preventDefault();
                    newIndex = getNextAvailableValue(currentIndex, column === 'hours' ? Array.from({
                        length: 24
                    }, (_, i)=>i.toString().padStart(2, '0')) : Array.from({
                        length: 60
                    }, (_, i)=>i.toString().padStart(2, '0')), disabledValuesForColumn, 'up');
                    if (newIndex !== null) {
                        const newValue = newIndex.toString().padStart(2, '0');
                        const element = timeItemRefs.current[`${column}-${newValue}`];
                        setTimeout(()=>{
                            if (element) {
                                element.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'ArrowDown':
                    event.preventDefault();
                    newIndex = getNextAvailableValue(currentIndex, column === 'hours' ? Array.from({
                        length: 24
                    }, (_, i)=>i.toString().padStart(2, '0')) : Array.from({
                        length: 60
                    }, (_, i)=>i.toString().padStart(2, '0')), disabledValuesForColumn, 'down');
                    if (newIndex !== null) {
                        const newValue = newIndex.toString().padStart(2, '0');
                        const element = timeItemRefs.current[`${column}-${newValue}`];
                        setTimeout(()=>{
                            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) {
                        setCurrentColumn(newColumn);
                        const newValue = (activeTime[column]?.toString() || '0').padStart(2, '0');
                        const element = timeItemRefs.current[`${newColumn}-${newValue}`];
                        setTimeout(()=>{
                            if (element) {
                                element.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'ArrowLeft':
                    event.preventDefault();
                    if (column === 'minutes') {
                        newColumn = 'hours';
                    } else if (column === 'seconds') {
                        newColumn = 'minutes';
                    }
                    if (newColumn !== column) {
                        setCurrentColumn(newColumn);
                        const newValue = (activeTime[column]?.toString() || '0').padStart(2, '0');
                        const element = timeItemRefs.current[`${newColumn}-${newValue}`];
                        setTimeout(()=>{
                            if (element) {
                                element.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)) {
                        const newValue = newIndex.toString().padStart(2, '0');
                        const element = timeItemRefs.current[`${column}-${newValue}`];
                        setTimeout(()=>{
                            if (element) {
                                element.focus();
                            }
                        }, 0);
                    }
                    break;
                case 'End':
                    event.preventDefault();
                    newIndex = column === 'hours' ? 23 : 59;
                    while(disabledValuesForColumn.includes(newIndex) && newIndex >= 0){
                        newIndex--;
                    }
                    if (newIndex >= 0) {
                        const newValue = newIndex.toString().padStart(2, '0');
                        const element = timeItemRefs.current[`${column}-${newValue}`];
                        setTimeout(()=>{
                            if (element) {
                                element.focus();
                            }
                        }, 0);
                    }
                    break;
                default:
                    break;
            }
        };
        useEffect(()=>{
            if (currentColumn && currentColumn !== null) {
                const column = currentColumn;
                const value = activeTime[currentColumn]?.toString().padStart(2, '0');
                const element = timeItemRefs.current[`${column}-${value}`];
                setTimeout(()=>{
                    if (element) {
                        element.focus();
                    }
                }, 0);
            }
        }, [
            currentColumn
        ]);
        useEffect(()=>{
            return ()=>{
                [
                    hoursHideTimeoutRef,
                    minutesHideTimeoutRef,
                    secondsHideTimeoutRef
                ].forEach((timeoutRef)=>{
                    if (timeoutRef.current) {
                        clearTimeout(timeoutRef.current);
                    }
                });
            };
        }, []);
        useEffect(()=>{
            if (hoursColumnRef.current) {
                const computedStyle = getComputedStyle(hoursColumnRef.current);
                const gapValue = parseFloat(computedStyle.gap || '0');
                setGap(gapValue);
            }
        }, [
            hoursColumnRef.current
        ]);
        useEffect(()=>{
            setTimeout(()=>{
                updateScrollbar(hoursColumnRef, setHoursScrollbar);
                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
                if (columnsQuantity === 3) {
                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
                }
            }, 100);
        }, [
            columnsQuantity
        ]);
        useEffect(()=>{
            if (itemHeight === 0) return;
            const scrollToActiveItem = (columnRef, index)=>{
                if (columnRef.current && index !== null) {
                    const scrollPosition = index * (itemHeight + gap);
                    animateScrollTo(columnRef.current, scrollPosition);
                    setTimeout(()=>{
                        updateScrollbar(columnRef, setHoursScrollbar);
                    }, 300);
                }
            };
            const minutesIndex = activeTime.minutes !== null ? activeTime.minutes / (multiplicityMinutes ?? 1) : null;
            const secondsIndex = activeTime.seconds !== null ? activeTime.seconds / (multiplicitySeconds ?? 1) : null;
            scrollToActiveItem(hoursColumnRef, activeTime.hours);
            scrollToActiveItem(minutesColumnRef, minutesIndex);
            scrollToActiveItem(secondsColumnRef, secondsIndex);
        }, [
            activeTime.hours,
            activeTime.minutes,
            activeTime.seconds,
            itemHeight,
            gap,
            multiplicityMinutes,
            multiplicitySeconds
        ]);
        useEffect(()=>{
            const hoursColumn = hoursColumnRef.current;
            const minutesColumn = minutesColumnRef.current;
            const secondsColumn = secondsColumnRef.current;
            const handleHoursScroll = ()=>handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
            const handleMinutesScroll = ()=>handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
            const handleSecondsScroll = ()=>handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
            if (hoursColumn) {
                hoursColumn.addEventListener('scroll', handleHoursScroll);
            }
            if (minutesColumn) {
                minutesColumn.addEventListener('scroll', handleMinutesScroll);
            }
            if (secondsColumn) {
                secondsColumn.addEventListener('scroll', handleSecondsScroll);
            }
            return ()=>{
                if (hoursColumn) {
                    hoursColumn.removeEventListener('scroll', handleHoursScroll);
                }
                if (minutesColumn) {
                    minutesColumn.removeEventListener('scroll', handleMinutesScroll);
                }
                if (secondsColumn) {
                    secondsColumn.removeEventListener('scroll', handleSecondsScroll);
                }
            };
        }, []);
        useEffect(()=>{
            const hoursColumn = hoursColumnRef.current;
            const minutesColumn = minutesColumnRef.current;
            const secondsColumn = secondsColumnRef.current;
            const handleHoursMouseEnter = ()=>showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
            const handleMinutesMouseEnter = ()=>showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
            const handleSecondsMouseEnter = ()=>showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
            if (hoursColumn) {
                hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
            }
            if (minutesColumn) {
                minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
            }
            if (secondsColumn) {
                secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
            }
            return ()=>{
                if (hoursColumn) {
                    hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
                }
                if (minutesColumn) {
                    minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
                }
                if (secondsColumn) {
                    secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
                }
            };
        }, []);
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            view: view,
            size: size,
            disabled: disabled,
            onFocus: handleContainerFocus,
            ...rest
        }, /*#__PURE__*/ React.createElement(StyledTimePicker, {
            width: dropdownWidth,
            tabIndex: -1
        }, columnsConfig.map((columnConfig)=>{
            const { type, values } = columnConfig;
            let columnRef;
            let scrollbarState;
            let setScrollbar;
            let scrollbarRef;
            let thumbRef;
            let 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,
                disabledValues: getDisabledValuesForColumn(type),
                dropdownHeight,
                column: type,
                activeTime,
                currentColumn,
                handleTimeItemClick,
                handleTimeItemKeyDown,
                createScrollbarDragHandler,
                setScrollbar,
                columnRef,
                scrollbarState,
                scrollbarRef,
                thumbRef,
                timeoutRef,
                timeItemRefs
            });
        })));
    });
export const timePickerGridConfig = {
    name: 'TimePickerGrid',
    tag: 'div',
    layout: timePickerGridRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        size: 'm',
        view: 'default'
    }
};
