class TesseractOCRModelList {
  constructor () {
    
    this.elements =  {
      tesseractOCRModelList: document.querySelector('#tesseract-ocr-model-list'),
      deleteButtons: document.querySelectorAll('.delete-button'),
      editButtons: document.querySelectorAll('.edit-button'),
      
    }
  }

  init () {
    let userId = this.elements.tesseractOCRModelList.dataset.userId;
    
    for (let deleteButton of this.elements.deleteButtons) {
      deleteButton.addEventListener('click', () => {this.deleteModel(deleteButton, userId);});
    }

    for (let editButton of this.elements.editButtons) {
      editButton.addEventListener('click', () => {this.editModel(editButton);});
    }
  }

  deleteModel(deleteButton, userId) {
    return new Promise((resolve, reject) => {
      let modelId = deleteButton.dataset.modelId;
      let model = app.data.users[userId].tesseract_ocr_pipeline_models[modelId];
      let modalElement = Utils.elementFromString(
        `
          <div class="modal">
            <div class="modal-content">
              <h4>Confirm job deletion</h4>
              <p>Do you really want to delete? All files will be permanently deleted!</p>
            </div>
            <div class="modal-footer">
              <a class="action-button btn modal-close waves-effect waves-light" data-action="cancel">Cancel</a>
              <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
            </div>
          </div>
        `
      );
      document.querySelector('#modals').appendChild(modalElement);
      let modal = M.Modal.init(
        modalElement,
        {
          dismissible: false,
          onCloseEnd: () => {
            modal.destroy();
            modalElement.remove();
          }
        }
      );
      let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
      confirmElement.addEventListener('click', (event) => {
        let modelTitle = model.title;
        fetch(`/contributions/edit-tesseract-model/${modelId}`, {method: 'DELETE'})
          .then(
            (response) => {
              app.flash(`Model "${modelTitle}" marked for deletion`, 'corpus');
              resolve(response);
            },
            (response) => {
              if (response.status === 403) {app.flash('Forbidden', 'error');}
              if (response.status === 404) {app.flash('Not Found', 'error');}
              reject(response);
            }
          );
      });
      modal.open();
    });
  }

  editModel(editButton) {
    window.location.href = `/contributions/edit-tesseract-model/${editButton.dataset.modelId}`;
  }
}