import React, { useMemo, useEffect } from 'react';
import "./index.less";
import { sliceDayIntoFiveMinutes, findNextSlice } from "../utils";
import classNames from 'classnames';
var RightPanel = function RightPanel(props) {
  var value = props.value,
    onChange = props.onChange,
    _props$slice = props.slice,
    slice = _props$slice === void 0 ? 5 : _props$slice;
  var list = useMemo(function () {
    return sliceDayIntoFiveMinutes(slice);
  }, [slice]);
  useEffect(function () {
    console.log(findNextSlice({
      timeSlices: list,
      date: value
    }));
    var nextTime = findNextSlice({
      timeSlices: list,
      date: value
    });
    var scrollDom = document.querySelector('.select-time-right-panel-list');
    var timeDom = document.querySelector("#time".concat(nextTime.replace(':', '')));
    if (scrollDom && timeDom) {
      scrollDom.scrollTop = timeDom.offsetTop;
    }
  }, [value]);
  return /*#__PURE__*/React.createElement("div", {
    className: "select-time-right-panel"
  }, /*#__PURE__*/React.createElement("div", {
    className: "select-time-right-panel-list"
  }, list.map(function (d) {
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('select-time-right-panel-item', {
        'select-time-right-panel-item-active': d.value === value
      }),
      key: d.value,
      id: 'time' + d.value.replace(':', ''),
      onClick: function onClick() {
        onChange(d.value);
      }
    }, d.label);
  })));
};
export default RightPanel;