text: 'use strict';
  
  // Represents a contact 
  class Contact {
    constructor(id, name, phone) {
      this.id = id;
      this.name = name;
      this.phone = phone;
    }
  }
  
  let currentPage = 1;
  
  // Display books when content load
  document.addEventListener('DOMContentLoaded', () => {
    Model.getCurrentKey();
    console.log('Model.key', Model.key);
  
    if (Model.getContactsFromLocalStorage().length === 0) {
      View.showEmptyField();
    } else {
      View.hideEmptyField();
      View.displayContacts(currentPage);
    }
  
    Model.displayContacts();
  });
  
  // Search contact
  document.getElementById('search').addEventListener('input', e => {
    View.searchContacts(e.target.value);
  });
  
  // Create or edit a contact
  document.getElementById('create').onclick = () => {
    View.showPopUp();
    View.resetPopUpFields();
    View.hidePopUpWarning('name');
    View.hidePopUpWarning('phone');
  
    document.getElementsByClassName('pop-up__title')[0].textContent = 'Add contact';
  }
  
  // Cancel editing or adding a contact
  document.getElementById('button-cancel').onclick = () => View.hidePopUp();
  
  // Save a new or edited contact
  document.getElementById('button-save').onclick = () => {
    const contact = new Contact(
      Model.key,
      document.getElementById('input-name').value,
      document.getElementById('input-phone').value
    );
    
    if (View.isInputValid(contact.name, 'name')) {
      View.hidePopUpWarning('name');
    } else {
      View.showPopUpWarning('name');
    }
    
    if (View.isInputValid(contact.phone, 'phone')) {
      View.hidePopUpWarning('phone');
    } else {
      View.showPopUpWarning('phone');
    }
  
    if (!View.isInputValid(contact.name, 'name') || !View.isInputValid(contact.phone, 'phone')) {
      return;
    }
  
    if (Model.contactAlreadyExists(contact)) {
      View.showStatus('Contact already exists !', 'error');
      return;
    }
  
    Model.setCurrentKey();
    
    if (document.getElementsByClassName('pop-up__title')[0].textContent === 'Edit contact') {
      Model.edit(
        View.rowOfElementThatWillBeEdited.childNodes[1].textContent,
        contact.name,
        contact.phone
      );
      View.changeContactPropertys(contact);
      View.showStatus('Contact edited with success !');
    } else {
      Model.insert(contact);
        
      if (Model.getMaxPagination() !== currentPage) {
        currentPage = Model.getMaxPagination();
        View.pagination(currentPage);
      } 
  
      View.addContactToList(contact);
      View.reDisplayContacts(currentPage);
      
      if (Model.getContactsFromLocalStorage().length !== 0)
        View.hideEmptyField();
      
      View.showStatus('Contact added with success !');
    }
      
    View.hidePopUp();
    Model.displayContacts();
  }
  
  // Edit or delete a contact
  document.getElementById('table-body').addEventListener('click', e => {
      
    if (e.target.textContent.trim() === 'Edit') {
      View.showPopUp();
      document.getElementsByClassName('pop-up__title')[0].textContent = 'Edit contact';
      
      View.editContact(e.target.parentElement.parentElement.parentElement);
    } else if (e.target.textContent.trim() === 'Delete') { 
      Model.remove(
        e.target.parentElement.parentElement.
        previousElementSibling.previousElementSibling.
        previousElementSibling.textContent
      );
      View.removeContactFromList(e.target);
      if (Model.getContactsFromLocalStorage().length === 0)
        View.showEmptyField();
  
      View.reDisplayContacts(currentPage);
      View.pagination(currentPage);
      View.showStatus('Contact removed with success !');
    }
  
    Model.displayContacts();
  });
  
  // Go to next page
  document.getElementById('next').addEventListener('click', () => {
    if (currentPage < Model.getMaxPagination()) {
      currentPage++;
      View.pagination(currentPage); 
      View.reDisplayContacts(currentPage);
    }
  })
  
  // Go to previous page
  document.getElementById('previous').addEventListener('click', () => {
    if (currentPage > 1) {
      currentPage--;
      View.pagination(currentPage);
      View.reDisplayContacts(currentPage);
    }
  })
  