import React, { Component } from "react";
import moment from "moment";
import { Crosshair as Cross } from "react-vis";

const AmsCrossFormat = ({ cross, superArr }) => {
  return (
    <div
      style={{
        background: "rgba(42,61,92, 0.9)",
        width: "200px",
        color: "#fff",
        borderRadius: "4px",
        padding: "2px 0 2px 8px"
      }}
    >
      <h4>
        {superArr[0] &&
          cross[0] &&
          moment(cross[0].x).format("DD.MM.YY, HH:mm")}
      </h4>
      {superArr[0] && <p>Скорость ветра: {cross[0] ? cross[0].y : "-"} м/с</p>}
      {superArr[1] && <p>Температура: {cross[1] ? cross[1].y : "-"} C°</p>}
      {superArr[2] && (
        <p>Барическая тенденция: {cross[2] ? cross[2].y : "-"} гПа</p>
      )}
      {superArr[3] && <p>Осадки: {cross[3] ? cross[3].y : "-"}</p>}
      {superArr[4] && (
        <p>
          Приведенное давление: {cross[4] ? cross[4].y : "-"}
          гПа
        </p>
      )}
      {superArr[5] && <p>Давление: {cross[5] ? cross[5].y : "-"} гПа</p>}
      {superArr[6] && <p>Направление ветра: {cross[6] ? cross[6].z : "-"}°</p>}
    </div>
  );
};

export default AmsCrossFormat;