import QtQuick 2.0
import QtQuick.Dialogs 1.2
import QtQuick.Controls 1.2
import "qrc:/js/service.js" as Service
import "qrc:/js/layout.js" as Layoutjs
import "qrc:/js/helper.js" as Helperjs
import "qrc:/qml"

StackView{
   id: configStack
   anchors.fill:parent
   focus: true 
   Keys.onReleased: if (event.key === Qt.Key_Back && stackView.depth > 1) {
     stackView.pop(); event.accepted = true; 
                    }
   initialItem: Flickable{
    width:root.width-5*mm
    height:root.height-12*mm
    contentHeight: configBackground.height
    boundsBehavior: Flickable.StopAtBounds
    Rectangle{
        id:configBackground
        color: "grey"
        width:parent.width
        height:Math.max(80*mm,root.height-12*mm)
        focus: true

 ComboBox{
     y:mm
   width: root.width/2
   model: ListModel{
      id: usermodel
   }
onCurrentIndexChanged:{
       try {Service.readConfig(db,function(obj){
           servername.text=obj.server;
            username.text= obj.username;
            password.text=Qt.atob(obj.password);
           imagestore.text=obj.imagestore;
           maxNewsText.text=obj.maxnews;
            if( obj.isActive==0){isActiveField.text=qsTr("yes")} else {isActiveField.text=qsTr("no")}
       },"username",currentText)}
       catch (e){print(e)}
     }
}


    Text {
      text: "Server"
     x: 4*mm; y: 10*mm
    }
    Text {
      text: "User"
     x: 4*mm; y: 20*mm
    }

    Text {
        text: "Password"
       x: 4*mm; y: 30*mm
      }
    Text {
       text: "Image dir."
      x: 4*mm; y: 40*mm
     }

   Text {
       text: "Max. News"
      x: 4*mm; y: 50*mm
     }
    Text {
        text: "is Active"
       x: 4*mm; y: 60*mm
      }

        Rectangle{color: "white";  x: 25*mm; y: 10*mm; width: root.width/2; height: 5*mm;}
         Flickable {
         id: servernameFlickable
         x: 25*mm; y: 10*mm; width: root.width/2; height: 5*mm;
          contentWidth: servername.paintedWidth
         contentHeight: servername.paintedHeight
         clip: true
         TextEdit {
             id: servername
             width: servernameFlickable.width
             height: servernameFlickable.height
             focus: true
             text:"https://..."
             //wrapMode: TextEdit.NoWrap
             //validator: RegExpValidator { regExp: /^(((http|https|ftp):\/\/)?([[a-zA-Z0-9]\-\.])+(\.)([[a-zA-Z0-9]]){2,4}([[a-zA-Z0-9]\/+=%&_\.~?\-]*))*$/}
            // onEditingFinished:{}
            onCursorRectangleChanged: Layoutjs.ensureVisibility(cursorRectangle,servernameFlickable)
         }
     }

    Rectangle{
        color: "white"
         x: 25*mm; y: 20*mm; width: root.width/2; height: 5*mm;
         TextInput {
         id: username
         anchors.fill: parent
         selectByMouse: true
    }
     }
    Rectangle{
        color: "white"
         x: 25*mm; y: 30*mm; width: root.width/2; height: 5*mm;
         TextInput {
         id: password
         anchors.fill: parent
         selectByMouse: true
         echoMode: TextInput.PasswordEchoOnEdit
    }
 }

    Rectangle{color: "white"; x: 25*mm; y: 40*mm; width: root.width/2-9*mm; height: 5*mm;}
    Flickable {
         id: imagestoreFlickable
          x: 25*mm; y: 40*mm; width: root.width/2-9*mm; height: 5*mm;
         clip: true
         TextInput {
             id: imagestore
             width: imagestoreFlickable.width
             height: imagestoreFlickable.height
             wrapMode: TextEdit.NoWrap
             onCursorRectangleChanged: Layoutjs.ensureVisibility(cursorRectangle,imagestoreFlickable)
         }
     }
Slider{ id: maxNews
x:37*mm; y: 50*mm;width: root.width/6;height:5*mm
minimumValue: 0;maximumValue:100000; stepSize: 1000
}
Rectangle{color: "white"; x: 25*mm; y: 50*mm; width: 9*mm; height: 5*mm;
    TextEdit{id:maxNewsText;
        anchors.fill: parent
        verticalAlignment:TextEdit.AlignRight
        text:maxNews.value
        focus: true
        selectByMouse: true
    }
}


    Rectangle{
         x: 25*mm; y: 60*mm; width: root.width/2; height: 5*mm;
         Text{
         id: isActiveField
         anchors.fill: parent
    }
 }

 FileDialog {
         id: imagestoreDialog
         title: "Please choose a directory"
      folder: shortcuts.pictures
       selectFolder: true
         onAccepted: {
             var imagestoreString=imagestoreDialog.folder.toString();                imagestoreString=imagestoreString.replace(/^(file:\/{2})/,"")+"/"
             imagestore.text=imagestoreString;
             console.log("You chose: " + imagestoreDialog.folder)
        }
     onRejected: {
         console.log("Canceled")
         }
 }

     Button {
            x: root.width/2+18*mm; y: 40*mm; width: 7*mm; height: 5*mm;
            text: "..."
            onClicked:
         {imagestoreDialog.open()}
     }


    Button {
    x: 25*mm; y: 70*mm; width: implicitWidth; height: implicitHeight;
    text: "Update"
    onClicked:{
         var userconfig={server: servername.text, username: username.text, password:Qt.btoa(password.text), imagestore:imagestore.text,maxnews:maxNewsText.text};
         var errormessage="";
         if (servername.text==""){errormessage=qsTr("No server given! ")}
         //if (!servername.acceptableInput){errormessage+=qsTr("Server name not valid! ")}
         else if (username.text==""){errormessage+=qsTr("No username given! ")}
         else if (password.text=="") {errormessage+=qsTr("No password given! ")}
         else if (imagestore.text=="") {errormessage+=qsTr("No image directory given!")}
         else if (maxNewsText.text=="") {errormessage+=qsTr("No maximum news number given!")}
         else {errormessage=""}
         if (errormessage=="") {Service.storeConfig(db,userconfig);
                    Service.readConfig(db,function(userconfig){Service.getServerConfig(userconfig,configBackground, function(obj){
                     var serverString=obj;
                     var serverconfigObject=Qt.createQmlObject(serverString,configBackground,"serverconfigOutput");
                        usermodel.append({text:username.text});
                       //reset values
                        root.login=userconfig;
                        root.contactlist=[];
                        root.news=[]
                        root.newContacts=[]
                        root.currentContact= 0
                        root.contactLoadType= ""

                       root.currentIndex=0;
                       newstab.active=true;
                    })},"isActive",0);
                    //try {newstab.newsModel.clear();
                    //friendstab.friendsModel.clear();
                    //photostab.photogroupModel.clear();} catch(e){}
        }
         else {Helperjs.show("Error", errormessage,root)}
}}

    Button {
    x: root.width/2+2*mm; y: mm; width: 5*mm; height: 5*mm;
    text: "-"
    onClicked:{
        var userconfig={server: servername.text, username: username.text, password: Qt.btoa(password.text)};
        Service.deleteConfig(db,userconfig);
    }}

    Button {
    x: root.width/2+8*mm; y: mm; width: 5*mm; height: 5*mm;
    text: "+"
    onClicked:{
        servername.text="https://..."
        username.text=""
        password.text=""
        imagestore.text=""
        maxNews.value=1000
        isActiveField.text=""
       }
     }

    Button {
    x: root.width/2+14*mm; y: mm; width: 5*mm; height: 5*mm;
    text: "?"
    onClicked:{
                configStack.push({item:"qrc:/qml/InfoBox.qml"});
       }
     }

   Component.onCompleted: {
      try{Helperjs.readData(db,"config",function(users){
          users.sort(function(obj1, obj2) {
              return obj1.isActive - obj2.isActive;
          });
          for (var  i=0; i<users.length;i++){
             if (users[i]) {usermodel.append({text:users[i].username});};
         };})}
      catch (e){print(e)}
    }
}
}
}