import { Controller } from "./main";

class ProgressInfo{
    displayText:string;
    percentValue:number;
    indeterminate:boolean;
    constructor(displayText:string, percentValue: number, indeterminate:boolean ){
      this.displayText = displayText
      this.percentValue = percentValue <0 ? 0 : percentValue > 100? 100: percentValue
      this.indeterminate = indeterminate
    }
  }

export class ProgressView{
  progressPane: HTMLElement;
  progress: HTMLElement;
  progressPaneSpan: HTMLSpanElement;
  progresses: Map<string,ProgressInfo> = new Map;
  progressPaneBar: HTMLDivElement;
  constructor(controller:Controller){
    this.progressPane = document.getElementById("progressPane") as HTMLElement;
    this.progress = document.getElementById("progress") as HTMLElement;
    this.progressPaneSpan = document.getElementById("progressPaneSpan") as HTMLSpanElement;
    this.progressPaneBar = document.getElementById("progressPaneBar") as HTMLDivElement;
    
  }

  updateView() {
    if (this.progresses.size == 0){
      this.progressPane.style.display = "none"
    } else{
      const first = this.progresses.entries().next().value![1]
      this.progressPaneBar.setAttribute("data-label", first.displayText)
      if (first.indeterminate){
        this.progressPaneSpan.className = "valueIndeterminate"
        this.progressPaneSpan.style.width = "100%"

      } else {
        this.progressPaneSpan.className = "value"
        this.progressPaneSpan.style.width = first.percentValue+"%"
      }
    }
  }

  addIndeterminate(id:string, displayText:string){
    this.progresses.set(id, new ProgressInfo(displayText,0,true))
    this.progressPane.style.display = "flex"
    this.updateView();
 
  }
  
  addProgress(id:string, value:number, displayText:string) {
    this.progresses.set(id, new ProgressInfo(displayText,value, false))
    this.progressPane.style.display = "flex"
    this.updateView();
  }
  removeProgress(id:string){
    this.progresses.delete(id)
    this.updateView();

  }
}