import { Utility } from '../../core/utility';
import { TableIndices } from '../../lib/table/table';

const CHECKBOX_SELECTOR    = '[type="checkbox"]';

const CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized';

@Utility({
  selector: 'table:not([uw-no-check-all])',
})
export class CheckAll {
  _element;

  _columns = new Array();
  _checkAllColumns = new Array();

  _tableIndices;

  constructor(element, app) {
    if (!element) {
      throw new Error('Check All utility cannot be setup without an element!');
    }

    this._element = element;

    if (this._element.classList.contains(CHECK_ALL_INITIALIZED_CLASS)) {
      return false;
    }

    this._tableIndices = new TableIndices(this._element);

    this._gatherColumns();
    this._findCheckboxColumns().forEach(columnId => this._checkAllColumns.push(new CheckAllColumn(this._element, app, this._columns[columnId])));

    // mark initialized
    this._element.classList.add(CHECK_ALL_INITIALIZED_CLASS);
  }

  _gatherColumns() {
    for (const rowIndex of new Array(this._tableIndices.maxRow + 1)) {
      for (const colIndex of new Array(this._tableIndices.maxCol + 1)) {
        const cell = this._tableIndices.getCell(rowIndex, colIndex);

        if (!cell)
          continue;
        
        if (!this._columns[colIndex])
          this._columns[colIndex] = new Array();

        this._columns[colIndex][rowIndex] = cell;
      }
    }
  }

  _findCheckboxColumns() {
    let checkboxColumnIds = new Array();
    this._columns.forEach((col, i) => {
      if (this._isCheckboxColumn(col)) {
        checkboxColumnIds.push(i);
      }
    });
    return checkboxColumnIds;
  }

  _isCheckboxColumn(col) {
    return col.every(cell => cell.tagName == 'TH' || cell.querySelector(CHECKBOX_SELECTOR))
      && col.some(cell => cell.querySelector(CHECKBOX_SELECTOR));
  }
}

class CheckAllColumn {
  _app;
  _table;
  _column;
  
  _checkAllCheckbox;
  _checkboxId = 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
  
  constructor(table, app, column) {
    this._column = column;
    this._table = table;
    this._app = app;

    const th = this._column.filter(element => element.tagName == 'TH')[0];
    if (!th)
      return false;

    this._checkAllCheckbox = document.createElement('input');
    this._checkAllCheckbox.setAttribute('type', 'checkbox');
    this._checkAllCheckbox.setAttribute('id', this._checkboxId);
    th.insertBefore(this._checkAllCheckbox, th.firstChild);

    // set up new checkbox
    this._app.utilRegistry.initAll(th);

    this._checkAllCheckbox.addEventListener('input', this._onCheckAllCheckboxInput.bind(this));
    this._setupCheckboxListeners();
  }

  _onCheckAllCheckboxInput() {
    this._toggleAll(this._checkAllCheckbox.checked);
  }

  _setupCheckboxListeners() {
    this._column
      .flatMap(cell => cell.tagName == 'TH' ? new Array() : Array.from(cell.querySelectorAll(CHECKBOX_SELECTOR)))
      .forEach(checkbox =>
               checkbox.addEventListener('input', this._updateCheckAllCheckboxState.bind(this))
              );
  }

  _updateCheckAllCheckboxState() {
    const allChecked = this._column.every(cell =>
      cell.tagName == 'TH' || cell.querySelector(CHECKBOX_SELECTOR).checked
    );
    this._checkAllCheckbox.checked = allChecked;
  }

  _toggleAll(checked) {
    this._column.forEach(cell => {
      if (cell.tagName == 'TH')
        return;

      cell.querySelector(CHECKBOX_SELECTOR).checked = checked;
    });
  }
}