/* eslint-disable no-unused-vars */
// eslint-disable-next-line
import React, { Component } from "react";
import LineGraph from "./LineGraph";
import "./TileGraph.css";
import LoaderContainer from "../../Components/Containers/LoaderContainer";

class Tile extends Component {
  constructor(props) {
    super(props);
    this.title = this.props.title;
    this.viewDetailsHref = this.props.viewDetailsHref;
    this.showViewDetails = this.props.viewDetailsHref != null;
    this.viewConfigHref = this.props.viewConfigHref;
    this.showViewConfig = this.props.viewConfigHref != null;
  }

  render() {
    return (
      <div
        className={
          !this.props.graphLabels.length
            ? "op-tile-graph loading"
            : "op-tile-graph"
        }
      >
        {!this.props.graphLabels.length ? (
          <LoaderContainer></LoaderContainer>
        ) : (
          <div className="op-tile-graph-head">
            <h2 className="op-tile-graph-title">{this.props.title}</h2>
            <div className="op-graph-detail">
              <ul>
                {this.props.graphLabels.map((m) => (
                  <li key={m.label}>
                    <div className="op-graph-type">
                      <label className={m.class}>{m.label}</label>
                    </div>
                    <label className="value">{m.value}</label>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}
        <div className="op-tile-graph-chart">
          <LineGraph
            graphData={this.props.graphData}
            average={this.props.average}
            labels={this.props.labels}
          />
        </div>
      </div>
    );
  }
}

export default Tile;