import {Stomp} from '@stomp/stompjs';
import SockJS from 'sockjs-client';
import LoadTestResultList from './LoadTestResultList';
import LoadTestResultDetail from './LoadTestResultDetail';

class LoadTestResultModel {
  constructor(testId) {
    this.testId = testId;
  }
}

class LoadTestResultView {
  constructor(model, element, controller) {
    this.element = element;
    this.model = model;
    this.controller = controller;

    this.testResultListElement = document.createElement('div');
    this.testResultListElement.id = 'loadTestResultList';
    this.testResultListElement.style.width = '250px';
    this.testResultListElement.style.border = '1px solid #e0e0e0';
    this.testResultListElement.style.padding = '5px';
    this.testResultListElement.style.overflow = 'hidden';
    this.testResultListElement.style.height = `${window.innerHeight - 160}px`;
    this.testResultListElement.style.maxHeight = '100%';
    this.testResultListElement.classList.add('load-test-result-container');
    this.element.appendChild(this.testResultListElement);

    this.testResultDetailElement = document.createElement('div');
    this.testResultDetailElement.id = 'loadTestResultDetail';
    this.testResultDetailElement.style.width = 'calc(100% - 250px)';
    this.testResultDetailElement.style.border = '1px solid #e0e0e0';
    this.testResultDetailElement.classList.add('load-test-result-detail');
    this.testResultDetailElement.style.display = 'flex';
    this.testResultDetailElement.style.height = `${window.innerHeight - 160}px`;
    this.testResultDetailElement.style.maxHeight = '100%'; //it seems not working
    this.element.appendChild(this.testResultDetailElement);
  }

  resize() {
    this.testResultListElement.style.height = `${window.innerHeight - 160}px`;
    this.testResultDetailElement.style.height = `${window.innerHeight - 160}px`;
  }
}

class LoadTestResultController {
  constructor(contextPath, element, model) {
    this.contextPath = contextPath || '/';
    this.model = model;
    this.view = new LoadTestResultView(this.model, element, this);
    this.subscription = null;
    this.loadTestResultList = null;
  }

  init() {
    console.log('LoadTestResultController init');
    //initialize websocket
    this.socket = new SockJS(this.contextPath + 'load-test-result');
    this.client = Stomp.over(this.socket);
    this.client.connect({}, () => {
      console.log('connected');
    });
    this.client.activate();
    this.bindEvents();
  }

  bindEvents() {
    window.addEventListener('resize', this.resize.bind(this));
  }

  resize() {
    this.view.resize();
  }

  showResult(testId) {
    if (this.subscription) {
      this.subscription.unsubscribe();
      this.subscription = null; // Clear the subscription after unsubscribing
    }
    this.model.testId = testId;
    this.subscription = this.client.subscribe(`/topic/${this.model.testId}`, (message) => {
      this.loadTestResultList.addTestResult(JSON.parse(message.body));
    });
  }
}

class LoadTestResult {
  constructor(contextPath, element) {
    this.contextPath = contextPath || '/';
    this.element = element;
  }

  init() {
    this.model = new LoadTestResultModel();
    this.controller = new LoadTestResultController(this.contextPath, this.element, this.model);
    this.controller.init();
    this.view = this.controller.view;
    this.loadTestResultDetail = new LoadTestResultDetail(this.contextPath, this.view.testResultDetailElement);
    this.loadTestResultList = new LoadTestResultList(this.contextPath, this.view.testResultListElement, this.loadTestResultDetail);
    this.controller.loadTestResultList = this.loadTestResultList;
  }

  showResult(testId) {
    this.controller.showResult(testId);
  }

  reset() {
    this.loadTestResultList.reset();
    this.loadTestResultDetail.reset();
  }

  showTestReport() {
    //show test report modal
  }
}

export default LoadTestResult;
