import React from "react";
import data from "./evaluation/metrics.json";
import {Table} from 'reactstrap';
import "./css/maps.css";

export default class Google extends React.Component{
  render() {
    let categoryRow;
    let metricRows = data.metrics.map((m, idx, metrics) => {
      if(idx === 0 || metrics[idx-1].category!==m.category){
        categoryRow = (<tr><th colSpan="3">{m.category}</th></tr>);
      }else{
        categoryRow = <></>
      }
      return (
        <>
          {categoryRow}
          <tr key={idx}>
            <td>{m.metric}</td>
            <td>{m.rating[this.props.mapId]}</td>
            <td>{m.comments[this.props.mapId]}</td>
          </tr>
        </>
      )
    })
    return (
      <div>
        <Table>
          <tbody>
            <tr>
              <th>Metrik</th>
              <th>Bewertung</th>
              <th>Kommentar</th>
            </tr>
            {metricRows}
          </tbody>
        </Table>
      </div>
    );
  }
}


//
//    <tr> for every metrik
//
//    if category != oldCat:
//    <td> cat name in bold
//    </tr>
//    <tr>
//
//        <td> metrik name
//        <td> if map == mapname
//    </tr>