class QueryResultList extends RessourceList {
  constructor(listElement, options = {}) {
    super(listElement, {...QueryResultList.options, ...options});
  }

  init(user) {
    super.init(user.query_results);
  }

  onclick(event) {
    let queryResultElement = event.target.closest('tr[data-id]');
    if (queryResultElement === null) {return;}
    let queryResultId = queryResultElement.dataset.id;
    let actionButtonElement = event.target.closest('.action-button[data-action]');
    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
    switch (action) {
      case 'delete':
        let deleteModalHTML = `
          <div class="modal">
            <div class="modal-content">
              <h4>Confirm query result deletion</h4>
              <p>Do you really want to delete the query result <b>${app.users[this.userId].query_results[queryResultId].title}</b>? It will be permanently deleted!</p>
            </div>
            <div class="modal-footer">
              <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
              <a class="btn modal-close red waves-effect waves-light" href="/query_results/${queryResultId}/delete"><i class="material-icons left">delete</i>Delete</a>
            </div>
          </div>
        `.trim();
        let deleteModalParentElement = document.querySelector('#modals');
        deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML);
        let deleteModalElement = deleteModalParentElement.lastChild;
        let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}});
        deleteModal.open();
        break;
      case 'view':
        window.location.href = `/query_results/${queryResultId}`;
        break;
      default:
        break;
    }
  }

  usersPatchHandler(patch) {
    let re = new RegExp(`^/users/${this.userId}/query_results/([A-Za-z0-9]*)`);
    let filteredPatch = patch.filter(operation => re.test(operation.path));
    for (let operation of filteredPatch) {
      switch(operation.op) {
        case 'add':
          re = new RegExp(`^/users/${this.userId}/query_results/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {this.add(operation.value);}
          break;
        case 'remove':
          re = new RegExp(`^/users/${this.userId}/query_results/([A-Za-z0-9]*)$`);
          if (re.test(operation.path)) {
            let [match, queryResultId] = operation.path.match(re);
            this.remove(queryResultId);
          }
          break;
        case 'replace':
          re = new RegExp(`^/users/${this.userId}/query_results/([A-Za-z0-9]*)/(corpus_title|description|query|title)$`);
          if (re.test(operation.path)) {
            let [match, queryResultId, valueName] = operation.path.match(re);
            this.replace(queryResultId, valueName, operation.value);
          }
          break;
        default:
          break;
      }
    }
  }

  preprocessRessource(queryResult) {
    return {
      id: queryResult.id,
      corpus_title: queryResult.corpus_title,
      creationDate: queryResult.creation_date,
      description: queryResult.description,
      query: queryResult.query,
      title: queryResult.title
    };
  }
}
QueryResultList.options = {
  item: `
    <tr>
      <td><b class="title"></b><br><i class="description"></i><br></td>
      <td><span class="corpus_title"></span><br><span class="query"></span></td>
      <td class="right-align">
        <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
        <a class="action-button btn-floating tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>
      </td>
    </tr>
  `.trim(),
  valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title']
};