import React, { Component } from "react";
import moment from "moment";
import styled from "styled-components";
import { Crosshair as Cross } from "react-vis";
const emptyCheck = arr => {
  let isEmpty = false;
  arr.forEach(element => {
    if (element.y !== null && element.y !== undefined) isEmpty = true;
  });
  return isEmpty;
};

export const LevelsCrossFormat = ({ cross, superArr, data }) => {
  let isData = emptyCheck(cross);

  return (
    <div
      style={{
        background: "rgba(42,61,92, 0.9)",
        width: "200px",
        // height: "50px",
        color: "#fff",
        borderRadius: "4px",
        padding: "2px 0 2px 8px",
        fontSize: 10
      }}
    >
      <h4 style={{ margin: 0 }}>
        {superArr[0] && cross[0] && moment(data[0].x).format("DD.MM.YY, HH:mm")}
      </h4>
      {!isData && <p style={{ fontSize: 15 }}>Нет данных</p>}

      {isData && superArr[0] && (
        <MarginLess>
          Уровень воды:{" "}
          {cross[0]
            ? cross[0].y !== ""
              ? `${cross[0].y} мм`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
      {isData && superArr[1] && (
        <MarginLess>
          Температура воды:{" "}
          {cross[1]
            ? cross[1].y !== ""
              ? `${cross[1].y} C°`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
    </div>
  );
};

export const EmptyCrossFormat = ({ cross, superArr }) => {
  return <></>;
};

const MarginLess = styled.div`
  margin: 0;
`;