import { useCallback, useMemo, useState } from "react";
import { ImageryLayer, useCesium } from "resium";
import { WebMapServiceImageryProvider } from "cesium";
import { useInterval } from "ahooks";

const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";

function IndianOceanSST() {
  const { viewer } = useCesium();
  const [show, setShow] = useState(false);

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

    if (leftTime <= 8) {
      setShow(true);
    } else if (show) setShow(false);
  }, [show]);

  useInterval(showAnimate, 300);

  const tempProvider = useMemo(
    () =>
      new WebMapServiceImageryProvider({
        url: url,
        layers: "phitrellis:4_2_Indian_Ocean_sst",
        parameters: {
          service: "WMS",
          format: "image/png",
          transparent: true,
        },
      }),
    [url]
  );

  return (
    <ImageryLayer
      show={show}
      key={`ImageryLayer-india-ocean`}
      imageryProvider={tempProvider}
    />
  );
}

export default IndianOceanSST;
