import React from 'react';

const Summary = (props) => {

    String.prototype.capitalize = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    }

    const result = props.testResponse.reduce((summary, item) => {
        summary[item.service] = summary[item.service] || [];
        summary[item.service].push(item);
        return summary;
      }, []);

    console.log(result);

    const summaryItems = Object.keys(result).forEach(key => {
        <h5>{ key.capitalize() }</h5>
        result[key].map((item, id) => (
            <table class="table table-bordered table-hover">
              <tbody>
                <tr>
                  <th scope="row">{id}</th>
                  <td>{ item.name }</td>
                  {item.data.result ? <td>{item.data.result.supported ? "Supported" : "Not supported"}</td>: (null)}
                </tr>
              </tbody>
            </table>
            ))
        }
    );

    // const summaryItems = props.testResponse.map((item, id) => (
    //     <tr>
    //     <th scope="row">{id}</th>
    //     <td>{ item.name }</td>
    //     {item.data.result ? <td>{item.data.result.supported ? "Supported" : "Not supported"}</td>: (null)}
    //     </tr>
    // ))

    return ( { summaryItems } )
}

export default Summary;