import React, { useRef, useEffect, useState } from 'react';
import classnames from 'classnames';
var defaultProps = {
    prefixCls: 'ty-time-picker',
};
var TimePanel = function (props) {
    var value = props.value, count = props.count, onChange = props.onChange, prefixCls = props.prefixCls;
    var _a = useState(-1), selectedIdx = _a[0], setSelectedIdx = _a[1];
    var panelRef = useRef(null);
    var ulRef = useRef(null);
    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);
            }
        }
    };
    var scrollToTop = function (idx, elHeight) {
        if (elHeight === void 0) { elHeight = 30; }
        setSelectedIdx(idx);
        panelRef.current && panelRef.current.scrollTo({
            top: idx * elHeight,
            behavior: 'smooth',
        });
    };
    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 }, Array(count).fill(0).slice().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')));
        }))));
};
TimePanel.defaultProps = defaultProps;
export default TimePanel;
//# sourceMappingURL=time-panel.js.map