class LoadTestResultListModel {
  constructor() {
    this.testResults = [];
  }
}

class LoadTestResultListView {
  constructor(element, model, controller) {
    this.element = element;
    const ul = document.createElement('ul');
    ul.style.overflowY = 'scroll';
    ul.style.padding = '0';
    ul.style.height = 'inherit';
    ul.style.maxHeight = '100%';
    this.element.appendChild(ul);
    this.model = model;
    this.controller = controller;
  }

  addTestResult(result) {
    const ul = this.element.querySelector('ul');
    const li = document.createElement('li');
    li.style.border = '1px solid #e0e0e0';
    li.style.marginBottom = '5px';
    li.style.padding = '4px';
    li.textContent = result.request.name; // Assuming `result` is a string or has a `.toString()` method that returns a meaningful representation

    li.addEventListener('click', () =>{
      const allLi = ul.querySelectorAll('li');
      allLi.forEach(li => {
        li.classList.remove('selected');
      });

      // Add "selected" class to the clicked li
      li.classList.add('selected');
      this.controller.showDetail(result);
    } );

    ul.appendChild(li);
  }
}

class LoadTestResultListController {
  constructor(model, element, detail) {
    this.model = model;
    this.view = new LoadTestResultListView(element, model, this);
    this.detail = detail;
  }

  init() {
    this.bindEvents();
  }

  showDetail(result) {
    this.detail.showDetail(result);
  }

  bindEvents() {
    const events = [
      // {type: 'click'}
    ];

    for (let event of events) {
      $(document).off(event.type, event.selector).on(event.type, event.selector, event.action);
    }
  }

  addTestResult(result) {
    this.model.testResults.push(result);
    this.view.addTestResult(result);
  }

  reset() {
    this.model.testResults = [];
    this.view.element.querySelector('ul').innerHTML = '';
  }
}

class LoadTestResultList {

  constructor(contextPath, element, detail) {
    this.contextPath = contextPath || '/';
    this.model = new LoadTestResultListModel();
    this.detail = detail;
    this.controller = new LoadTestResultListController(this.model, element, detail);
  }

  init() {
    this.controller.init();
  }

  addTestResult(result) {
    this.controller.addTestResult(result);
  }

  reset() {
    this.controller.reset();
  }
}

export default LoadTestResultList;

