class UserList extends RessourceList {
  static options = {
    item: `
      <tr class="hoverable">
        <td><span class="id-1"></span></td>
        <td><span class="username"></span></td>
        <td><span class="email"></span></td>
        <td><span class="last-seen"></span></td>
        <td><span class="role"></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="edit" data-position="top" data-tooltip="Edit"><i class="material-icons">edit</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(),
    ressourceMapper: user => {
      return {
        'id': user.id,
        'id-1': user.id,
        'username': user.username,
        'email': user.email,
        'last-seen': new Date(user.last_seen).toLocaleString("en-US"),
        'member-since': user.member_since,
        'role': user.role.name
      };
    },
    sortValueName: 'member-since',
    valueNames: [
      {data: ['id']},
      {data: ['member-since']},
      'email',
      'id-1',
      'last-seen',
      'role',
      'username'
    ]
  };



  constructor(listElement, options = {}) {
    super(listElement, {...UserList.options, ...options});
  }

  init(users) {
    super._init(Object.values(users));
  }

  onclick(event) {
    let action;
    let actionButtonElement;
    let deleteModal;
    let deleteModalElement;
    let tmp;
    let userElement;
    let userId;

    userElement = event.target.closest('tr[data-id]');
    if (userElement === null) {return;}
    userId = userElement.dataset.id;
    actionButtonElement = event.target.closest('.action-button[data-action]');
    action = (actionButtonElement === null) ? 'view' : actionButtonElement.dataset.action;
    switch (action) {
      case 'delete':
        tmp = document.createElement('div');
        tmp.innerHTML = `
          <div class="modal">
            <div class="modal-content">
              <h4>Confirm user deletion</h4>
              <p>Do you really want to delete user <b>${userId}</b>? All files 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="/admin/users/${userId}/delete"><i class="material-icons left">delete</i>Delete</a>
            </div>
          </div>
        `.trim();
        deleteModalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
        deleteModal = M.Modal.init(
          deleteModalElement,
          {
            onCloseEnd: () => {
              deleteModal.destroy();
              deleteModalElement.remove();
            }
          }
        );
        deleteModal.open();
        break;
      case 'edit':
        window.location.href = `/admin/users/${userId}/edit`;
        break;
      case 'view':
        window.location.href = `/admin/users/${userId}`;
        break;
      default:
        break;
    }
  }
}