import { __spreadArrays } from "tslib";
import React, { useRef, useEffect, useState } from 'react';
import classNames from 'classnames';
var TimePanel = function (props) {
    var _a = props.prefixCls, prefixCls = _a === void 0 ? 'ty-time-picker' : _a, value = props.value, count = props.count, onChange = props.onChange;
    var _b = useState(-1), selectedIdx = _b[0], setSelectedIdx = _b[1];
    var panelRef = useRef(null);
    var ulRef = useRef(null);
    var scrollToTop = function (idx, elHeight) {
        if (elHeight === void 0) { elHeight = 30; }
        setSelectedIdx(idx);
        panelRef.current &&
            panelRef.current.scrollTo({
                top: idx * elHeight,
                behavior: 'smooth',
            });
    };
    var ulOnClick = function (e) {
        var target = e.target;
        if (target.nodeName === 'LI') {
            var idx = target.dataset.idx;
            var elHeight = target.clientHeight;
            if (idx) {
                scrollToTop(+idx, elHeight);
                onChange && onChange(+idx);
            }
        }
    };
    useEffect(function () {
        scrollToTop(value);
        ulRef.current && ulRef.current.addEventListener('click', ulOnClick);
        return function () {
            ulRef.current && ulRef.current.removeEventListener('click', ulOnClick);
        };
    }, []);
    return (React.createElement("div", { className: prefixCls + "__panel", ref: panelRef },
        React.createElement("ul", { className: prefixCls + "__ul", ref: ulRef }, __spreadArrays(Array(count).fill(0)).map(function (_, idx) {
            var _a;
            var cls = classNames(prefixCls + "__li", (_a = {},
                _a[prefixCls + "__li_selected"] = idx === selectedIdx,
                _a));
            return (React.createElement("li", { key: idx, className: cls, "data-idx": idx }, idx.toString().padStart(2, '0')));
        }))));
};
export default TimePanel;
//# sourceMappingURL=time-panel.js.map