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( /*#__PURE__*/React.createElement(TableCell, {
        key: i + "-sno",
        className: "tableDataAlign"
      }, `${i + 1}`)); //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( /*#__PURE__*/React.createElement(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"]));
        } else {
          var keyCodeData = element[j]["keyCode"].split("."); //console.log("misMatch", misMatchDataValue[i]);

          if (keyCodeData.length === 2 && rowData[i].hasOwnProperty(keyCodeData[0])) {
            children.push( /*#__PURE__*/React.createElement(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"]));
          } else {
            children.push( /*#__PURE__*/React.createElement(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"]));
          }
        }
      } //Create the parent and add the children


      table.push( /*#__PURE__*/React.createElement(TableRow, {
        key: i
      }, children));
    }

    return table;
  }

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

    if (loadTableHeader) {
      var tableHeader;
      tableHeader = /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, tableCellHeader.map((header, hKey) => /*#__PURE__*/React.createElement("td", {
        key: header["id"]
      }, /*#__PURE__*/React.createElement("b", null, translateLabel(header["labelName"])))))); //    var tableHeader;
      //     tableHeader = <TableHead className="tabHeader">
      //     <TableRow>
      //         {tableCellHeader.map((header, hKey) => (    
      //                 <TableCell key={header["id"]}><b>{translateLabel(header["labelName"])}</b></TableCell>
      //         ))}
      //     </TableRow>
      //   </TableHead>

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

}

export default withStyles(useStyles)(DynamicTableView);