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

function Labels() {
  const { viewer } = useCesium();

  const [showOne, setShowOne] = useState(false);
  const [showTwo, setShowTwo] = useState(false);
  const [showThree, setShowThree] = useState(false);

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

    if (leftTime < 20) {
      setShowOne(true);
    } else if (showOne) setShowOne(false);

    if (leftTime < 15) {
      setShowTwo(true);
    } else if (showTwo) setShowTwo(false);

    if (leftTime < 5) {
      setShowThree(true);
    } else if (showThree) setShowThree(false);
  }, [showOne, showTwo, showThree, viewer]);

  useInterval(showAnimate, 300);

  return (
    <Fragment>
      <Entity position={Cartesian3.fromDegrees(-60, 65, 0)}>
        <LabelGraphics
          text={"拉布拉多海海温偏暖"}
          font="24px Helvetica"
          fillColor={Color.SKYBLUE}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
      <Entity show={showOne} position={Cartesian3.fromDegrees(-20, 55, 0)}>
        <LabelGraphics
          text={"北大西洋大气环流异常"}
          font="24px Helvetica"
          fillColor={Color.SKYBLUE}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
      <Entity show={showTwo} position={Cartesian3.fromDegrees(31, 48, 0)}>
        <LabelGraphics
          text={"欧洲地区大气环流异常"}
          font="24px Helvetica"
          fillColor={Color.SKYBLUE}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
      <Entity show={showThree} position={Cartesian3.fromDegrees(98, 48, 0)}>
        <LabelGraphics
          text={"barotropic"}
          font="24px Helvetica"
          fillColor={Color.SKYBLUE}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 1200000)}
        />
      </Entity>
      <Entity show={showThree} position={Cartesian3.fromDegrees(90, 27, 0)}>
        <LabelGraphics
          text={"青藏高原夏季出现年代际增温"}
          font="24px Helvetica"
          fillColor={Color.SKYBLUE}
          outlineColor={Color.BLACK}
          outlineWidth={2}
          style={LabelStyle.FILL_AND_OUTLINE}
          eyeOffset={new Cartesian2(0, 200000)}
        />
      </Entity>
    </Fragment>
  );
}

export default Labels;
