import React from "react";
import cls from "classnames";
import { classes } from "../../TimePickerGrid.tokens";
import { StyledTimeColumn, StyledTimeItem, StyledEmpty, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledRoot } from "./TimeColumn.styles";
export const renderTimeColumn = ({ values, disabledValues, dropdownHeight, column, activeTime, currentColumn, handleTimeItemClick, handleTimeItemKeyDown, createScrollbarDragHandler, setScrollbar, columnRef, scrollbarState, scrollbarRef, thumbRef, timeoutRef, timeItemRefs })=>{
    const handleKeyDown = (e, columnType, value)=>{
        handleTimeItemKeyDown(e, columnType, value);
    };
    const handleClick = (value, columnType)=>{
        const isDisabled = disabledValues?.some((disabledValue)=>parseInt(disabledValue.toString(), 10) === parseInt(value, 10));
        if (!isDisabled) {
            handleTimeItemClick(value, columnType);
        }
    };
    const minDisableIndex = ()=>{
        if (!disabledValues || disabledValues.length === 0) {
            return 0;
        }
        const disabledNumbers = disabledValues.map((val)=>parseInt(val.toString(), 10));
        for(let i = 0; i < values.length; i++){
            const currentValue = parseInt(values[i], 10);
            if (!disabledNumbers.includes(currentValue)) {
                return i;
            }
        }
        return 0;
    };
    const isColumnActive = currentColumn === column;
    const minAvailableIndex = minDisableIndex();
    return /*#__PURE__*/ React.createElement(StyledRoot, null, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
        key: column,
        ref: columnRef,
        height: dropdownHeight,
        className: classes.timeColumn,
        tabIndex: -1
    }, values.map((value, index)=>{
        const isDisabled = disabledValues?.some((disabledValue)=>parseInt(disabledValue.toString(), 10) === parseInt(value, 10));
        const isActive = activeTime[column] === parseInt(value, 10);
        const getTabIndex = ()=>{
            if (isDisabled) return -1;
            const isValueActive = activeTime[column] === parseInt(value, 10);
            if (isColumnActive && isValueActive) {
                return 0;
            }
            if (index === minAvailableIndex) {
                return 0;
            }
            return -1;
        };
        const tabIndex = getTabIndex();
        return /*#__PURE__*/ React.createElement(StyledTimeItem, {
            key: column + value,
            ref: (el)=>{
                timeItemRefs.current[`${column}-${value}`] = el;
            },
            className: cls({
                [classes.timeItemActive]: isActive,
                [classes.itemDisabled]: isDisabled
            }),
            onClick: ()=>handleClick(value, column),
            onKeyDown: (e)=>handleKeyDown(e, column, value),
            "aria-disabled": isDisabled,
            tabIndex: tabIndex,
            "data-value": value,
            "data-column": column,
            "data-active": isActive
        }, value);
    }), /*#__PURE__*/ React.createElement(StyledEmpty, null)), /*#__PURE__*/ React.createElement(CustomScrollbar, {
        ref: scrollbarRef,
        className: cls({
            [classes.scrollbarVisible]: scrollbarState?.isVisible
        }),
        tabIndex: -1
    }, /*#__PURE__*/ React.createElement(ScrollbarTrack, null, /*#__PURE__*/ React.createElement(ScrollbarThumb, {
        ref: thumbRef,
        style: {
            height: `${scrollbarState?.thumbHeight}px`,
            top: `${scrollbarState?.thumbPosition}px`
        },
        onMouseDown: columnRef && setScrollbar && timeoutRef ? createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef) : undefined,
        tabIndex: -1
    }))));
};
