import {Controller} from "./main";
import {FileInfo, FileList} from "./api";
const regex = /[^a-zA-Z0-9_.]/g;

function sanitize(str:string){
  return str.replaceAll(regex, '_')
} 

export class FileView {
  readonly fileListView: HTMLElement;
  readonly controller: Controller;
  readonly filefreesize: HTMLElement;
  readonly filetotalsize: HTMLElement;
  readonly fileusedsize: HTMLElement;

  constructor(controller: Controller) {
    (document.getElementById("fileview") as HTMLElement).innerHTML = require('./fileview.html') as string;
    this.fileListView = document.getElementById("fileList") as HTMLElement
    this.filefreesize = document.getElementById("filefreesize") as HTMLElement
    this.filetotalsize = document.getElementById("filetotalsize") as HTMLElement
    this.fileusedsize = document.getElementById("fileusedsize") as HTMLElement

    let fileuploadfile = document.getElementById("fileuploadfile") as HTMLInputElement
    let fileuploadname = document.getElementById("fileuploadname") as HTMLInputElement
    let fileuploadbtn = document.getElementById("fileuploadbtn") as HTMLInputElement
    fileuploadfile.onchange = () => {
      const selectedFile = fileuploadfile.files?.[0];
      if (selectedFile == null) {
        //TODO error dialog here
        return
      }
      
      fileuploadname.value = sanitize(selectedFile.name)
    };

    fileuploadname.onchange = () => {
      let input = fileuploadname.value
      let clean = sanitize(fileuploadname.value)
      if (input != clean){
        fileuploadname.value = clean
      }
    }

    fileuploadbtn.onclick = () => {
      const selectedFile = fileuploadfile.files?.[0];
      if (selectedFile == null) {
        //TODO error dialog here
        return
      }
      controller.uploadFile(selectedFile, selectedFile.name)
    }



    this.controller = controller;
  }

  setFileList(fileList: FileList, public_url: string) {
    this.filetotalsize.innerText = Math.floor(fileList.total / 1024) + "kB"
    this.fileusedsize.innerText = Math.ceil(fileList.used / 1024) + "kB"
    this.filefreesize.innerText = Math.ceil((fileList.total - fileList.used) / 1024) + "kB"

    //fast clear
    this.fileListView.textContent = ""
    for (let i = 0; i < fileList.files.length; i++) {
      let file = fileList.files[i]
      new FileEntry(this.controller, i, file, this.fileListView, public_url);
    }
  }
}

class FileEntry {
  view: HTMLElement;
  constructor(controller: Controller, fileid: number, fileinfo: FileInfo, parent: HTMLElement, public_url: string) {
    this.view = document.createElement("div") as HTMLElement
    parent.appendChild(this.view)
    this.view.classList.add("fileentryouter")

    const template = require('./fileviewentry.html') as string;
    this.view.innerHTML = template.replaceAll("${fileid}", String(fileid))

    let name = document.getElementById("file_" + fileid + "_name") as HTMLElement;
    let size = document.getElementById("file_" + fileid + "_size") as HTMLElement;
    let deleteBtn = document.getElementById("file_" + fileid + "_delete") as HTMLButtonElement;
    deleteBtn.onclick = () => {
      controller.deleteFile(fileinfo.filename);
    }

    let downloadBtn = document.getElementById("file_" + fileid + "_download") as HTMLAnchorElement;
    downloadBtn.href = public_url + "/file?filename=" + fileinfo.filename
    downloadBtn.download = fileinfo.filename

    name.innerText = fileinfo.filename;
    size.innerText = fileinfo.size.toString()
  }
}