import { useEffect, useMemo, useState } from "react";
import { ImageryLayer, useCesium } from "resium";
import { WebMapServiceImageryProvider } from "cesium";
import { useInterval } from "ahooks";
import { useDispatch, useSelector } from "react-redux";

const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
const nameList = [
  1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992,
  1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005,
  2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017,
].map((item) => "phitrellis:4_1_la_" + item);

function LabradorImageLayer() {
  const dispatch = useDispatch();
  const { viewer } = useCesium();
  const { imageLayer } = useSelector((state) => state.data);
  const [delay, setDelay] = useState(undefined);
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const { labrador } = imageLayer;
    if (!!labrador) {
      setDelay((60 / nameList.length) * 1000);
      setIndex(0);
    }
  }, [imageLayer]);

  const layers = nameList.map((name, index) => {
    const tempProvider = useMemo(
      () =>
        new WebMapServiceImageryProvider({
          url: url,
          layers: name,
          parameters: {
            service: "WMS",
            format: "image/png",
            transparent: true,
          },
        }),
      [name, url]
    );

    return (
      <ImageryLayer
        key={`ImageryLayer-${index}`}
        imageryProvider={tempProvider}
        show={true}
      />
    );
  });

  useInterval(() => {
    setIndex((index) => index + 1);

    if (index >= nameList.length) {
      setIndex(0);
      setDelay((60 / nameList.length) * 1000);
    }
  }, delay);

  if (!viewer.clock?.shouldAnimate) return;

  return layers[index];
}

export default LabradorImageLayer;