import classNames from "classnames";
import styles from "./index.module.less";
import { useCesium } from "resium";
import { useState } from "react";
import { useInterval } from "ahooks";

const textList = [
  "5月南极涛动",
  "原子阿蒙森海的纬向波列异常",
  "印度洋海温降低",
  "环流异常",
  "高原上空降水增加、感热通量降低",
];

export default function TimeLinePanel() {
  const { viewer } = useCesium();

  const [showIndex, setShowIndex] = useState(0);

  useInterval(() => {
    const { startTime, currentTime, shouldAnimate } = viewer.clock;
    const passtime = Math.floor(
      currentTime.secondsOfDay - startTime.secondsOfDay
    );
    if (!shouldAnimate) return;

    if (passtime < 2) {
      setShowIndex(0);
    } else if (passtime > 2 && passtime < 20) {
      setShowIndex(1);
    } else if (passtime > 20 && passtime < 23) {
      setShowIndex(2);
    } else if (passtime > 23 && passtime < 25) {
      setShowIndex(3);
    } else if (passtime > 25 && passtime < 30) {
      setShowIndex(4);
    }
  }, 300);

  return (
    <div className={styles.timeLinePanel}>
      {textList.map((text, index) => (
        <div
          className={classNames("timeline-panel-item", {
            highlight: index === showIndex,
          })}
          key={`timeline-panel-item-${index}`}
        >
          <span>{text}</span>
        </div>
      ))}
    </div>
  );
}
