import { Fragment } from "react";
import styles from "./index.module.less";

const colorBar = [
  "#7F20F0",
  "#2A09FA",
  "#1C33F1",
  "#3B6CE3",
  "#2388F8",
  "#0EA5FE",
  "#23C0FB",
  "#85CAF1",
  "#B8E1F3",
  "#FEF995",
  "#FEDD30",
  "#FEB709",
  "#FF8B00",
  "#FF5D00",
  "#FF1001",
  "#E00000",
  "#D62A2A",
  "#FFB1B1",
];

const colorBar2 = [
  "#7F20F0",
  "#0e03fd",
  "#3B5CE3",
  "#2684f6",
  "#09b0ff",
  "#56c4f4",
  "#b0ddf3",
  "#FEF687",
  "#ffcd1e",
  "#ff9700",
  "#fe5100",
  "#f60100",
  "#cd0d0c",
  "#FFB1B1",
];

function Legend({ style }) {
  return (
    <Fragment>
      <div className={styles.legend} style={{ bottom: 14 }}>
        <div className="legend-title">
          南半球冬季南极半岛区域地表气温年代际分量(单位：K)
        </div>
        <div className="colorbar">
          {colorBar.map((color, index) => {
            return (
              <div
                key={`colorbar-item-${index}`}
                className="colorbar-item"
                style={{ backgroundColor: color }}
              />
            );
          })}
        </div>
        <div className="legend-text">
          {[-0.8, -0.4, 0, 0.4, 0.8].map((item, index) => {
            return (
              <div
                key={`legend-text-item-${index}`}
                className="legend-text-item"
                style={{
                  textAlign:
                    index === 2 ? "center" : index < 2 ? "left" : "right",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <div className={styles.legend} style={{ bottom: 116 }}>
        <div className="legend-title">
          南半球冬季热带大西洋海表温度(单位：K)
        </div>
        <div className="colorbar">
          {colorBar.map((color, index) => {
            return (
              <div
                key={`colorbar-item-${index}`}
                className="colorbar-item"
                style={{ backgroundColor: color }}
              />
            );
          })}
        </div>
        <div className="legend-text">
          {[-0.2, -0.1, 0, 0.1, 0.2].map((item, index) => {
            return (
              <div
                key={`legend-text-item-${index}`}
                className="legend-text-item"
                style={{
                  textAlign:
                    index === 2 ? "center" : index < 2 ? "left" : "right",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      <div className={styles.legend} style={{ bottom: 220 }}>
        <div className="legend-title">
          南半球冬季200hPa涡动位势高度异常(单位：gpm)
        </div>
        <div className="colorbar">
          {colorBar2.map((color, index) => {
            return (
              <div
                key={`colorbar-item-${index}`}
                className="colorbar-item"
                style={{ backgroundColor: color }}
              />
            );
          })}
        </div>
        <div className="legend-text">
          {[
            "",
            -15,
            "",
            "",
            -10,
            "",
            "",
            -5,
            "",
            "",
            0,
            "",
            "",
            5,
            "",
            "",
            10,
            "",
            "",
            15,
            "",
          ].map((item, index) => {
            return (
              <div
                key={`legend-text-item-${index}`}
                className="legend-text-item"
                style={{
                  textAlign: "center",
                  //   textAlign:
                  //     index === 2 ? "center" : index < 2 ? "left" : "right",
                }}
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
    </Fragment>
  );
}

export default Legend;
