import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium";
import { Fragment } from "react";
import { Entity, LabelGraphics } from "resium";

const points = [
  {
    position: [13, -70, 30, -67],
    name: "南极附近海冰异常",
    // name: "sic_s",
  },
  {
    position: [93, 29, 99, 35],
    name: "青藏高原上空积雪异常",
    // name: "sc_tp",
  },
  {
    position: [68, 48, 76, 52],
    name: "欧亚大陆上空积雪异常",
    // name: "sc_ea",
  },
  {
    position: [150, 60, 160, 70],
    name: "表面温度异常ts_ac",
  },
  {
    position: [130, 20, 140, 28],
    name: "表面温度异常ts_wp",
  },
  {
    position: [150, 12, 175, 22],
    name: "表面温度异常ts_np",
  },
  {
    position: [-110, 20, -95, 35],
    name: "表面温度异常ts_arn",
  },
  {
    position: [10, -12, 45, -2],
    name: "表面温度异常ts_af",
  },
  { position: [80, 10, 110, 20], name: "表面温度异常ts_io" },
  { position: [-150, -10, -40, 5], name: "表面温度异常ts_ep" },
  { position: [65, -62, 90, -57], name: "表面温度异常ts_aa" },
  {
    position: [145, -30, 155, -20],
    name: "表面温度异常ts_ea",
  },
  { position: [165, -45, 180, -30], name: "表面温度异常ts_nz" },
  { position: [-140, -60, -110, -45], name: "表面温度异常ts_sp" },
  { position: [-70, -78, -50, -70], name: "表面温度异常ts_wd" },
];

function Labels() {
  return (
    <Fragment>
      {points.map((point, index) => {
        const { position, name } = point;
        const [x, y, z, m] = position;
        const lon = (x + z) / 2;
        const lat = (y + m) / 2;

        return (
          <Entity
            key={`rectangle-label-${index}`}
            position={Cartesian3.fromDegrees(lon, lat, 0)}
          >
            <LabelGraphics
              text={name}
              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;
