import { Fragment } from "react";

const colorBar = [
  "#ffc53d",
  "#ffd666",
  "#ffe58f",
  "#fff1b8",
  "#fffbe6",
  "#e6f7ff",
  "#bae7ff",
  "#91d5ff",
  "#69c0ff",
  "#40a9ff",
];

const colorBar2 = [
  "#73d13d",
  "#95de64",
  "#b7eb8f",
  "#d9f7be",
  "#f6ffed",
  "#fff1f0",
  "#ffccc7",
  "#ffa39e",
  "#ff7875",
  "#ff4d4f",
];

function Legend() {
  return (
    <Fragment>
      <div className="vertical-legend" style={{ right: 12 }}>
        <div className="legend-title">站点感热通量异常</div>
        <div style={{ flex: 1, width: "100%", display: "flex", gap: 8 }}>
          <div className="legend-text">
            {[-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5].map(
              (item, index) => {
                return (
                  <div
                    key={`legend-text-item-${index}`}
                    className="legend-text-item"
                  >
                    {item}
                  </div>
                );
              }
            )}
          </div>
          <div className="colorbar">
            {colorBar2.map((color, index) => {
              return (
                <div
                  key={`colorbar-item-${index}`}
                  className="colorbar-item"
                  style={{ backgroundColor: color }}
                  title={`${(-0.5 + index * 0.1).toFixed(1)}~${(
                    -0.5 +
                    (index + 1) * 0.1
                  ).toFixed(1)}`}
                />
              );
            })}
          </div>
        </div>
      </div>
      <div className="vertical-legend" style={{ right: 154 }}>
        <div className="legend-title">站点降水异常</div>
        <div style={{ flex: 1, width: "100%", display: "flex", gap: 8 }}>
          <div className="legend-text">
            {[-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5].map(
              (item, index) => {
                return (
                  <div
                    key={`legend-text-item-${index}`}
                    className="legend-text-item"
                  >
                    {item}
                  </div>
                );
              }
            )}
          </div>
          <div className="colorbar">
            {colorBar.map((color, index) => {
              return (
                <div
                  key={`colorbar-item-${index}`}
                  className="colorbar-item"
                  style={{ backgroundColor: color }}
                  title={`${(-0.5 + index * 0.1).toFixed(1)}~${(
                    -0.5 +
                    (index + 1) * 0.1
                  ).toFixed(1)}`}
                />
              );
            })}
          </div>
        </div>
      </div>
    </Fragment>
  );
}

export default Legend;
