import { Utility } from '../../core/utility';

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 = [];
  _checkAllColumns = [];

  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._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() {
    const rows = Array.from(this._element.rows);
    const cols = [];
    rows.forEach((tr) => {
      const cells = Array.from(tr.cells);
      cells.forEach(cell => {
        let i = 0;
        for (const sibling of cells.slice(0, cell.cellIndex))
          i += Math.max(1, sibling.colSpan) || 1;

        for (let j = i; j < i + cell.colSpan; j++) {
          if (!cols[j]) {
            cols[j] = [];
          }
          cols[j].push(cell);
        }
      });
    });
    this._columns = cols;
  }

  _findCheckboxColumns() {
    let checkboxColumnIds = [];
    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;
    });
  }
}