import { useInterval } from "ahooks";
import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium";
import { Fragment, useCallback, useState } from "react";
import { Entity, LabelGraphics, useCesium } from "resium";

function Labels() {
  const { viewer } = useCesium();
  const [showIO, setShowIO] = useState(false);
  const [showTB, setShowTB] = useState(false);

  const showAnimate = useCallback(() => {
    const { currentTime, stopTime } = viewer.clock;
    const leftTime = Math.floor(
      stopTime.secondsOfDay - currentTime.secondsOfDay
    );

    if (leftTime < 5) {
      setShowIO(true);
    } else if (showIO) {
      setShowIO(false);
    }
    if (leftTime < 4) {
      setShowTB(true);
    } else if (showIO) {
      setShowTB(false);
    }
  }, [showIO]);

  useInterval(showAnimate, 100);

  return (
    <Fragment>
      <Entity position={Cartesian3.fromDegrees(-110, -60, 0)}>
        <LabelGraphics
          text={"5月南极涛动"}
          font="24px Helvetica"
          fillColor={Color.fromCssColorString("#04fbfd")}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
      <Entity show={showIO} position={Cartesian3.fromDegrees(73, -7, 0)}>
        <LabelGraphics
          text={"印度洋海温异常"}
          font="24px Helvetica"
          fillColor={Color.fromCssColorString("#04fbfd")}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
      <Entity show={showTB} position={Cartesian3.fromDegrees(94, 24, 0)}>
        <LabelGraphics
          text={"高原上空降水增加、感热通量降低"}
          font="24px Helvetica"
          fillColor={Color.fromCssColorString("#04fbfd")}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 0)}
        />
      </Entity>
    </Fragment>
  );
}

export default Labels;
