import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { createRef, useContext } from 'react';
import cx from 'classnames';
import PanelContext from '../../context/PanelContext';
import { smoothScroll } from '../../../utils/scroll';
import { useIsomorphicLayoutEffect } from '../../../utils/hooks/useIsomorphicLayoutEffect';
var prefixCls = 'zent-datepicker-time-panel-body';
function generateUnits(start, end, step, disabledUnits) {
    var units = [];
    for (var i = start; i <= end; i += step) {
        units.push({
            label: i.toString().padStart(2, '0'),
            value: i,
            disabled: disabledUnits.includes(i),
        });
    }
    return units;
}
var UNIT_MAP = {
    hour: 23,
    minute: 59,
    second: 59,
};
var TimeUnitColumn = function (_a) {
    var type = _a.type, _b = _a.step, step = _b === void 0 ? 1 : _b, selected = _a.selected, setting = _a.setting, _c = _a.disabledUnits, disabledUnits = _c === void 0 ? [] : _c;
    var ulRef = createRef();
    var visibleChange = useContext(PanelContext).visibleChange;
    var units = generateUnits(0, UNIT_MAP[type], step, disabledUnits);
    useIsomorphicLayoutEffect(function () {
        visibleChange &&
            ulRef.current &&
            smoothScroll(ulRef.current, 0, (selected * 32) / step, 1);
        selected &&
            !visibleChange &&
            ulRef.current &&
            smoothScroll(ulRef.current, 0, (selected * 32) / step, 160);
    }, [selected, visibleChange, ulRef, step]);
    return (_jsx("div", __assign({ className: prefixCls + "_scroll", ref: ulRef, "data-zv": 'v10.0.11' }, { children: units.map(function (_a) {
            var _b;
            var value = _a.value, label = _a.label, disabled = _a.disabled;
            return (_jsx("div", __assign({ className: cx(prefixCls + "-unit", (_b = {},
                    _b[prefixCls + "-unit_selected"] = value === selected,
                    _b[prefixCls + "-unit_disabled"] = disabled,
                    _b[prefixCls + "-unit_available"] = !disabled,
                    _b)), onClick: function () { return !disabled && setting(value); }, "data-zv": 'v10.0.11' }, { children: label }), value));
        }) }), void 0));
};
export default TimeUnitColumn;
