import React, {Component} from 'react';
import PropTypes from 'prop-types';

import './LargeDataTable.scss';

export class LargeDataTable extends Component {
  render() {
    const { data, total } = this.props;
    const colHeaders = data[0].map(c => c.label);
    const colTotals = [];
    const rowTotals = [];

    for (let row = 0; row < data.length; row++) {
      for (let col = 0; col < data[row].columns.length; col++) {
        const colData = data[row].columns[col];
        colTotals[col] = colTotals[col] || 0;
        colTotals[col] += colData.count;

        rowTotals[col] = rowTotals[row] || 0;
        rowTotals[col] += colData.count;
      }
    }

    const grandRowTotal = rowTotals.reduce((rgt, rt) => rgt + rt);

    function handleScroll(e) {
      const { target } = e;
      const cornerElId = `LargeDataTable_tableCorner_${componentId}`;
      const blockerElId = `LargeDataTable_cornerBlock_${componentId}`;
      const colHeadSelector = `#LargeDataTable_${componentId} .LargeDataTable_head`;
      const rowHeadSelector = `#LargeDataTable_${componentId} .LargeDataTable_rowHead`;
      const corner = document.getElementById(cornerElId);
      const cornerBlock = document.getElementById(blockerElId);
      const colHeads = document.querySelector(colHeadSelector);
      const rowHeads = document.querySelectorAll(rowHeadSelector);

      const scrollTop = target.scrollTop - 1;
      const scrollLeft = target.scrollLeft - 1;

      const yTranslate = `translate(0, ${scrollTop}px)`;
      const xTranslate = `translate(${scrollLeft}px, 0)`;
      const xyTranslate = `translate(${scrollLeft}px, ${scrollTop}px)`;

      colHeads.style.transform = yTranslate;
      rowHeads.forEach(h => (h.style.transform = xTranslate));
      cornerBlock.style.width = `${corner.offsetWidth}px`;
      cornerBlock.style.height = `${corner.offsetHeight}px`;
      cornerBlock.style.transform = xyTranslate;
    }

    return (
      <div
        id={`LargeDataTable_${componentId}`}
        className="LargeDataTable"
        onScroll={handleScroll}>
        <div
          id={`LargeDataTable_cornerBlock_${componentId}`}
          className="LargeDataTable_noCol"
        />
        <table className="LargeDataTable_table">
          <thead className="LargeDataTable_head">
            <tr>
              <th
                id={`LargeDataTable_tableCorner_${componentId}`}
                className="LargeDataTable_col--option"
              />
              {colHeaders.map((text, i) => (
                <th
                  key={i}
                  className="LargeDataTable_col LargeDataTable_col--response">
                  {label}
                </th>
              ))}
              <th className="LargeDataTable_col LargeDataTable_col--total">
                Total
              </th>
            </tr>
          </thead>
          <tbody className="LargeDataTable_body">
            {data.map((row, i) => {
              return (
                <tr key={i}>
                  <td className="LargeDataTable_cell LargeDataTable_cell--option LargeDataTable_rowHead">
                    {row.label}
                  </td>
                  {row.columns.map((col, j) => {
                    const total = total;
                    const pct =
                      Math.round(100 / total * col.count) || 0;
                    const opacity = pct / 100 || 0;
                    const background = `rgba(84, 210, 156, ${opacity})`;

                    return (
                      <td
                        key={j}
                        className="LargeDataTable_cell LargeDataTable_cell--response"
                        style={{ background }}>
                        <span className="LargeDataTable_count">
                          {col.count}
                        </span>
                        <span className="LargeDataTable_percent">
                          {pct}%
                        </span>
                      </td>
                    );
                  })}
                  <td className="LargeDataTable_cell LargeDataTable_cell--total">
                    {rowTotals[i]}
                  </td>
                </tr>
              );
            })}
          </tbody>
          <tfoot className="LargeDataTable_foot">
            <tr>
              <td className="LargeDataTable_cell LargeDataTable_cell--option LargeDataTable_rowHead">
                Total
              </td>
              {colTotals.map((total, i) => (
                <td
                  key={i}
                  className="LargeDataTable_cell LargeDataTable_cell--response">
                  <span className="LargeDataTable_count">{total}</span>
                </td>
              ))}
              <td className="LargeDataTable_cell LargeDataTable_cell--total">
                {grandRowTotal}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    );
  }
  }
}