class Content {

  DocumentID:string = "content"
  TableID:string = "content_table"
  DivID:string
  headerClass:string = "content_table_header"
  interactionID:string = "content-interaction"

  createHeadline(value):any {
    var element = document.createElement("H3")
    element.textContent = value
    return element
  }

  createHR():any {
    var element = document.createElement("HR")
    return element
  }

  createInteraction():any {
    var element = document.createElement("DIV")
    element.setAttribute("id", this.interactionID)
    return element
  }

  createDIV():any {
    var element = document.createElement("DIV")
    element.id = this.DivID
    return element
  }

  createTABLE():any {
    var element = document.createElement("TABLE")
    element.id = this.TableID
    return element
  }

  createTableRow():any {
    var element = document.createElement("TR")
    element.className = this.headerClass
    return element
  }

  createTableContent(menuKey:string):string[] {

    var data = new Object()
    var rows = new Array()

    switch(menuKey) {
      case "playlist":
        var fileTypes = new Array("m3u", "hdhr")

        fileTypes.forEach(fileType => {
          
          data = SERVER["settings"]["files"][fileType]
        
          var keys = getObjKeys(data)
          
          keys.forEach(key => {
            var tr = document.createElement("TR")
            tr.id = key
            
            tr.addEventListener("click", function() { openPopUp(fileType, tr) })

            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["name"] 
            tr.appendChild(cell.createCell())

            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            if (SERVER["settings"]["buffer"] != "-") {
              cell.value = data[key]["tuner"] 
            } else {
              cell.value = "-"
            }
            
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["last.update"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["provider.availability"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["type"].toUpperCase();
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["compatibility"]["streams"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["compatibility"]["group.title"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["compatibility"]["tvg.id"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["compatibility"]["stream.id"]
            tr.appendChild(cell.createCell())
            
            rows.push(tr)
          });
        
        });
        break
      
        case "filter":
        delete SERVER["settings"]["filter"][-1]
        data = SERVER["settings"]["filter"]
        var keys = getObjKeys(data)
        keys.forEach(key => {
          var tr = document.createElement("TR")
          tr.id = key

          tr.addEventListener("click", function() { openPopUp(data[key]["type"], tr) })
          
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          cell.value = data[key]["name"]
          tr.appendChild(cell.createCell())

          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          switch (data[key]["type"]) {
            case "custom-filter":
              cell.value = "Custom"
              break;

            case "group-title":
              cell.value = "Group"
              break;

            case "regex-filter":
              cell.value = "Regex"
              break;
          
            default:
              break;
          }
          
          tr.appendChild(cell.createCell())

          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          cell.value = data[key]["filter"]
          tr.appendChild(cell.createCell())

          rows.push(tr)

        });
        break

      case "xmltv":
        var fileTypes = new Array("xmltv")

        fileTypes.forEach(fileType => {
            
          data = SERVER["settings"]["files"][fileType]
      
          var keys = getObjKeys(data)
    
          keys.forEach(key => {
            var tr = document.createElement("TR")
          
            tr.id = key
            tr.addEventListener("click", function() { openPopUp(fileType, tr) })

            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["name"] 
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["last.update"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["provider.availability"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["compatibility"]["xmltv.channels"]
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["compatibility"]["xmltv.programs"]
            tr.appendChild(cell.createCell())
            
            rows.push(tr)
          });
        
        });
        break

      case "users":
        var fileTypes = new Array("users")

        fileTypes.forEach(fileType => {
          data = SERVER[fileType]
      
          var keys = getObjKeys(data)
    
          keys.forEach(key => {
            var tr = document.createElement("TR")
            tr.id = key
            tr.addEventListener("click", function() { openPopUp(fileType, tr) })

            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = data[key]["data"]["username"] 
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            cell.value = "******"
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            if (data[key]["data"]["authentication.web"] == true) {
              cell.value = "✓"
            } else {
              cell.value = "-"
            }
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            if (data[key]["data"]["authentication.pms"] == true) {
              cell.value = "✓"
            } else {
              cell.value = "-"
            }
            tr.appendChild(cell.createCell())
            
            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            if (data[key]["data"]["authentication.m3u"] == true) {
              cell.value = "✓"
            } else {
              cell.value = "-"
            }
            tr.appendChild(cell.createCell())

            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            if (data[key]["data"]["authentication.xml"] == true) {
              cell.value = "✓"
            } else {
              cell.value = "-"
            }
            tr.appendChild(cell.createCell())

            var cell:Cell = new Cell()
            cell.child = true
            cell.childType = "P"
            if (data[key]["data"]["authentication.api"] == true) {
              cell.value = "✓"
            } else {
              cell.value = "-"
            }
            tr.appendChild(cell.createCell())
            
            rows.push(tr)
          });
        
        });
        break

      case "mapping":
        BULK_EDIT = false
        createSearchObj()
        checkUndo("epgMapping")
        console.log("MAPPING")
        data = SERVER["xepg"]["epgMapping"]

        var keys = getObjKeys(data)
        keys.forEach(key => {
          var tr = document.createElement("TR")
          tr.id = key


          switch (data[key]["x-active"]) {
            case true:
              tr.className = "activeEPG"
              break;
          
            case false:
              tr.className = "notActiveEPG"
              break;
          }
          
          // Bulk
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "BULK"
          cell.value = false
          tr.appendChild(cell.createCell())

          // Kanalnummer
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "INPUTCHANNEL"
          cell.value = data[key]["x-channelID"]
          tr.appendChild(cell.createCell())

          // Logo
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "IMG"
          cell.imageURL = data[key]["tvg-logo"]
          tr.appendChild(cell.createCell())
  
          // Kanalname
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          cell.className = data[key]["x-category"]
          cell.value = data[key]["x-name"]
          tr.appendChild(cell.createCell())
          

          // Playlist
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          //cell.value = data[key]["_file.m3u.name"] 
          cell.value = getValueFromProviderFile(data[key]["_file.m3u.id"], "m3u", "name")
          tr.appendChild(cell.createCell())
          

          // Gruppe (group-title)
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          cell.value = data[key]["x-group-title"] 
          tr.appendChild(cell.createCell())

          // XMLTV Datei
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"

          if (data[key]["x-xmltv-file"] != "-") {            
            cell.value = getValueFromProviderFile(data[key]["x-xmltv-file"], "xmltv", "name") 
          } else {
            cell.value = data[key]["x-xmltv-file"]
          }
          
          tr.appendChild(cell.createCell())          

          // XMLTV Kanal
          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "P"
          //var value = str.substring(1, 4);
          var value = data[key]["x-mapping"]
          if (value.length > 20) {
            value = data[key]["x-mapping"].substring(0, 20) + "..."
          }
          cell.value = value
          tr.appendChild(cell.createCell())

          var cell:Cell = new Cell()
          cell.child = true
          cell.childType = "EDIT"
          cell.value = "Edit"
          var editTd = cell.createCell()
          var editButton = (editTd.firstChild as HTMLInputElement)
          editButton.addEventListener("click", function() { openPopUp("mapping", editButton) })
          editButton.setAttribute("id", key)
          editButton.setAttribute("aria-label", "Edit " + data[key]["x-name"])
          tr.appendChild(editTd)

          rows.push(tr)
        });

        break

      case "settings":
        alert()
        break

      default:
        console.log("Table content (menuKey):", menuKey);
        
        break

    }

    return rows

  }

  return
}

class Cell {
  child:Boolean
  childType:string
  value:any
  className:string
  tdClassName:string
  imageURL:string
  onclick:boolean
  onclickHandler:() => void

  createCell():any {
    var td = document.createElement("TD")


    if (this.child == true) {
      var element:any

      switch(this.childType){
        case "P": 
          element = document.createElement(this.childType);
          element.textContent = this.value
          element.className = this.className
          break
        
        case "INPUT":
          element = document.createElement(this.childType);
          (element as HTMLInputElement).value = this.value;
          (element as HTMLInputElement).type = "text";
          break

        case "INPUTCHANNEL":
          element = document.createElement("INPUT");
          (element as HTMLInputElement).addEventListener("change", function() { changeChannelNumber(element) });
          (element as HTMLInputElement).value = this.value;
          (element as HTMLInputElement).type = "text";
          break

        case "BULK":
          element = document.createElement("INPUT");
          (element as HTMLInputElement).checked = this.value;
          (element as HTMLInputElement).type = "checkbox";
          (element as HTMLInputElement).className = "bulk hideBulk";
          (element as HTMLInputElement).addEventListener("click", function(event) {
            scheduleChannelRangeSelection((element as HTMLInputElement), (event as MouseEvent))
          })
          break

        case "BULK_HEAD":
          element = document.createElement("INPUT");
          (element as HTMLInputElement).checked = this.value;
          (element as HTMLInputElement).type = "checkbox";
          (element as HTMLInputElement).className = "bulk hideBulk";
          (element as HTMLInputElement).addEventListener("click", function() { selectAllChannels() })
          break

        case "IMG":
          element = document.createElement(this.childType);
          element.setAttribute("src", this.imageURL)  
          if (this.imageURL != "") {
            // A broken logo falls back to no image; once, so the empty src cannot loop.
            element.addEventListener("error", function() { element.setAttribute("src", "") }, {once: true})
          }
          break

        case "EDIT":
          element = document.createElement("INPUT");
          (element as HTMLInputElement).type = "button";
          (element as HTMLInputElement).value = this.value;
          (element as HTMLInputElement).className = "mapping-edit-button";
          break
      }
      
      td.appendChild(element)
      
    } else {
      td.textContent = this.value
    }

    if (this.onclick == true) {
      td.addEventListener("click", this.onclickHandler)
      td.className = "pointer"
    }

    if (this.tdClassName != undefined) {
      td.className = this.tdClassName
    }
  
    return td
  }

  return
}

class ShowContent extends Content {
  menuID:number

  constructor(menuID:number) {
    super()
    this.menuID = menuID
  }

  createInput(type:string, name:string, value:string,):any {
    
    var input = document.createElement("INPUT")
    input.setAttribute("type", type)
    input.setAttribute("name", name)
    input.setAttribute("value", value)
    return input
  }

  show():void {
    COLUMN_TO_SORT = -1
    // Alten Inhalt löschen
    var doc = document.getElementById(this.DocumentID)
    doc.innerHTML = ""
    showPreview(false)

    // Überschrift
    var headline:string[] = menuItems[this.menuID].headline
    
    var menuKey = menuItems[this.menuID].menuKey
    var h = this.createHeadline(headline)
    doc.appendChild(h)

    var hr = this.createHR()
    doc.appendChild(hr)

    // Interaktion
    var div =this.createInteraction()
    doc.appendChild(div)
    var interaction = document.getElementById(this.interactionID)
    switch (menuKey) {
      case "playlist":
        var input = this.createInput("button", menuKey, "New")
        input.setAttribute("id", "-")
        input.addEventListener("click", function() { openPopUp("playlist") })
        interaction.appendChild(input)
        break;

      case "filter":
        var input = this.createInput("button", menuKey, "New")
        input.setAttribute("id", -1)
        input.addEventListener("click", function(event) { openPopUp("filter", event.currentTarget) })
        interaction.appendChild(input)
        break;

        
      case "xmltv":
        var input = this.createInput("button", menuKey, "New")
        input.setAttribute("id", "xmltv")
        input.addEventListener("click", function() { openPopUp("xmltv") })
        interaction.appendChild(input)
        break;

      case "users":
        var input = this.createInput("button", menuKey, "New")
        input.setAttribute("id", "users")
        input.addEventListener("click", function() { openPopUp("users") })
        interaction.appendChild(input)
        break;

      case "mapping":
        showElement("loading", true)
        var input = this.createInput("button", menuKey, "Save")
        input.addEventListener("click", function() { savePopupData("mapping", "", false, 0) })
        interaction.appendChild(input)

        var input = this.createInput("button", menuKey, "Bulk Edit")
        input.addEventListener("click", function() { bulkEdit() })
        interaction.appendChild(input)

        var input = this.createInput("search", "search", "")
        input.setAttribute("id", "searchMapping")
        input.setAttribute("placeholder", "Search")
        input.className = "search"
        input.addEventListener("input", function() { searchInMapping() })
        interaction.appendChild(input)
        break;

      case "settings":
        var input = this.createInput("button", menuKey, "Save")
        input.addEventListener("click", function() { saveSettings() })
        interaction.appendChild(input)

        var input = this.createInput("button", menuKey, "Backup")
        input.addEventListener("click", function() { backup() })
        interaction.appendChild(input)

        var input = this.createInput("button", menuKey, "Restore")
        input.addEventListener("click", function() { restore() })
        interaction.appendChild(input)

        var wrapper = document.createElement("DIV")
        wrapper.setAttribute("id", "box-wrapper")
        doc.appendChild(wrapper)

        this.DivID = "content_settings"
        var settings = this.createDIV()
        wrapper.appendChild(settings)

        showSettings()
        
        return
        break

      case "log":
        var input = this.createInput("button", menuKey, "Reset Logs")
        input.addEventListener("click", function() { resetLogs() })
        interaction.appendChild(input)

        var wrapper = document.createElement("DIV")
        wrapper.setAttribute("id", "box-wrapper")
        doc.appendChild(wrapper)

        this.DivID = "content_log"
        var logs = this.createDIV()
        wrapper.appendChild(logs)

        showLogs(true)

        return
        break

      case "logout":
        location.reload()
        document.cookie = "Token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
        break

      default:
        console.log("Show content (menuKey):", menuKey);
        break;
    }
    
    // Tabelle erstellen (falls benötigt)
    var tableHeader:string[] = menuItems[this.menuID].tableHeader
    if (tableHeader.length > 0) {
      var wrapper = document.createElement("DIV")
      doc.appendChild(wrapper)
      wrapper.setAttribute("id", "box-wrapper")

      var table = this.createTABLE()
      wrapper.appendChild(table)

      var header = this.createTableRow()
      table.appendChild(header)

      // Kopfzeile der Tablle
      tableHeader.forEach(element => {
        var cell:Cell = new Cell()
        cell.child = true
        cell.childType = "P"
        cell.value = element
        if (element == "BULK") {
          cell.childType = "BULK_HEAD";
          cell.value = false
        }

        if (menuKey == "mapping") {
          
          if (element == "Ch. No.") {
            cell.onclick = true
            cell.onclickHandler = function() { sortTable(1) }
            cell.tdClassName = "sortThis"
          }
          
          if (element == "Channel Name") {
            cell.onclick = true
            cell.onclickHandler = function() { sortTable(3) }
          }
  
          if (element == "Playlist") {
            cell.onclick = true
            cell.onclickHandler = function() { sortTable(4) }
          }
  
          if (element == "Group Title") {
            cell.onclick = true
            cell.onclickHandler = function() { sortTable(5) }
          }
  
        }
        
        header.appendChild(cell.createCell())
      });

      table.appendChild(header)

      // Inhalt der Tabelle
      var rows:any = this.createTableContent(menuKey) 
      rows.forEach(tr => {
        table.appendChild(tr)
      });
      
    }

    switch (menuKey) {
      case "mapping":
        sortTable(1)
        break;

      case "filter":
        showPreview(true)
        sortTable(0)
        break
      
      default:
        COLUMN_TO_SORT = -1
        sortTable(0)
        break;
    }

    showElement("loading", false)
  }
  
}

function openThisMenu(element) {
  var id = element.id
  var content:ShowContent = new ShowContent(id)
  setActiveMenu(id)
  content.show()
  closeLayoutMenuIfMobile()
  calculateWrapperHeight()

  return
}