import React, { Component } from 'react';
import { Table } from 'react-bootstrap';
import { withStyles } from '@material-ui/core/styles';
//import {Typography, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';
import {Paper, TableBody, TableCell, TableContainer, TableRow } from '@material-ui/core';

import translateLabel from "../../../shared/translation";


const useStyles = theme => ({
  table: {
    minWidth: 450,
  },
  tableTitle: {
    marginTop: 20,
  },
});

class DynamicTableView extends Component {

    constructor(props){
        super(props);

        if(this.props.loadTableHeader) {

            this.rows = [];

        } else {
            
            this.rows = this.props.element !== undefined && this.props.element !== "" ? this.props.element.form : [];
        }
  
    }

    
  createTableRow(element, rowData, misMatchDataValue="") {
    
    let table = [];
   

    // Outer loop to create parent
    for(let i=0; i < Object.keys(rowData).length; i++) {

        let children = [];
       

  

        children.push(<TableCell key={i+"-sno"}  className={"tableDataAlign"}>{`${i+1}`}</TableCell>);
        //Inner loop to create children
        for (let j = 1; j < Object.keys(element).length; j++) {


            // Check misMatch data
            if(misMatchDataValue !== undefined && (misMatchDataValue.hasOwnProperty(i) && misMatchDataValue[i] !== undefined)  && misMatchDataValue[i].hasOwnProperty(element[j]["keyCode"])) {
                
                children.push(<TableCell key={j + "-" + element[j]["keyCode"]} align="left" className={misMatchDataValue[i][element[j]["keyCode"]]}>{ rowData[i].hasOwnProperty(element[j]["keyCode"]) ?  rowData[i][element[j]["keyCode"]] :  `---Column ${j + 1}`+ "@" + element[j]["keyCode"]}</TableCell>);

            } else {
                var keyCodeData = element[j]["keyCode"].split(".");
               
                //console.log("misMatch", misMatchDataValue[i]);

                if(keyCodeData.length === 2 && rowData[i].hasOwnProperty(keyCodeData[0])) {

                    children.push(<TableCell key={j + "-" + element[j]["keyCode"]} className={"tableDataAlign"}>{ rowData[i][keyCodeData[0]].hasOwnProperty(keyCodeData[1]) ?  rowData[i][keyCodeData[0]][keyCodeData[1]] :  `Column ${j + 1}`+ "@"+ element[j]["keyCode"]}</TableCell>);
           
                }  else {

                    children.push(<TableCell key={j + "-" + element[j]["keyCode"]}  className={"tableDataAlign"}>{ rowData[i].hasOwnProperty(element[j]["keyCode"]) ?  rowData[i][element[j]["keyCode"]] :  `Column ${j + 1}`+ "@"+ element[j]["keyCode"]}</TableCell>);
                 }

            }

        }
        
        //Create the parent and add the children
        table.push(<TableRow key={i}>{children}</TableRow>);

    }

    return table

   
  }

   
    render() {
       
       
       const { classes, element, misMatchData, tableTitle, tableCellHeader, tableCellData, loadTableHeader } = this.props;
       
       if(loadTableHeader) {

           var tableHeader;
          
           tableHeader = <thead>
                            <tr>
                            {tableCellHeader.map((header, hKey) => (    
                                <td key={header["id"]}><b>{translateLabel(header["labelName"])}</b></td>
                                ))}
                            </tr>
                         </thead>
          
            //    var tableHeader;
            
            //     tableHeader = <TableHead className="tabHeader">
                    
            //     <TableRow>
            //         {tableCellHeader.map((header, hKey) => (    
            //                 <TableCell key={header["id"]}><b>{translateLabel(header["labelName"])}</b></TableCell>
            //         ))}
            //     </TableRow>
                
            //   </TableHead>

            return (
                <div>   
                  <Table>
                    {tableHeader}
                    <tbody>
                       {this.createTableRow(element, tableCellData, misMatchData)} 
                    </tbody>
                  </Table>

                    {/* <Typography variant="h5" className={classes.tableTitle+" Grid-title"} gutterBottom>{tableTitle}</Typography>   
                    <TableContainer component={Paper}>
                    <Table className={classes.table} aria-label="simple table">
                    {tableHeader}
                        <TableBody>
    
                            {this.createTableRow(element, tableCellData, misMatchData)}
                       
                        </TableBody>
                    </Table>
                    </TableContainer> */}
                </div>
            );

       } else {

            return (
                <TableContainer component={Paper}>
                <Table className={classes.table} aria-label="simple table">
                    <TableBody>
                    {/* { console.log("this.rows == ",this.rows)} */}
                    {this.rows.map((row, eKey) => (
                        <TableRow key={row.name}>
                            <TableCell component="td" scope="row"  className={misMatchData!=="" && misMatchData!==undefined && misMatchData.hasOwnProperty(row.keyCode) ?  misMatchData[row.keyCode] + "col-tab-header" :"col-tab-header"}><b>{row.labelName}</b></TableCell>
                            <TableCell align="left" className={misMatchData!=="" && misMatchData!==undefined && misMatchData.hasOwnProperty(row.keyCode) ?  misMatchData[row.keyCode]:""}>{tableCellData[eKey].hasOwnProperty(row.name) ? tableCellData[eKey][row.name] : '-'}</TableCell>
                        </TableRow>
                    ))}
                    </TableBody>
                </Table>
                </TableContainer>
            );

       }
      

    }

}

export default  (withStyles(useStyles))(DynamicTableView);