import { findNextSlice, sliceDayIntoFiveMinutes } from "../utils.js";
import React, { useEffect, useMemo } from "react";
import classNames from "classnames";
import "./index.less";
//#region src/components/select-time/RightPanel/index.tsx
const RightPanel = (props) => {
	const { value, onChange, slice = 5 } = props;
	const list = useMemo(() => {
		return sliceDayIntoFiveMinutes(slice);
	}, [slice]);
	useEffect(() => {
		console.log(findNextSlice({
			timeSlices: list,
			date: value
		}));
		let nextTime = findNextSlice({
			timeSlices: list,
			date: value
		});
		let scrollDom = document.querySelector(".select-time-right-panel-list");
		const timeDom = document.querySelector(`#time${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((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: () => {
				onChange(d.value);
			}
		}, d.label);
	})));
};
//#endregion
export { RightPanel as default };
