import { Fragment, useMemo } from "react";
import { ImageryLayer } from "resium";
import { WebMapServiceImageryProvider } from "cesium";

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

const name1 = "phitrellis:4_1_sst_JJA_G_dif";
const name2 = "phitrellis:4_1_ts_tp_dif_mask";

function JJAImageLayer() {
  const tempProvider1 = useMemo(
    () =>
      new WebMapServiceImageryProvider({
        url: url,
        layers: name1,
        parameters: {
          service: "WMS",
          format: "image/png",
          transparent: true,
        },
      }),
    [name1, url]
  );

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

  return (
    <Fragment>
      <ImageryLayer
        key={`ImageryLayer-sst`}
        imageryProvider={tempProvider1}
        show={true}
      />
      <ImageryLayer
        key={`ImageryLayer-t2m`}
        imageryProvider={tempProvider2}
        show={true}
      />
    </Fragment>
  );
}

export default JJAImageLayer;
