import QtQuick 2.0
import QtQuick.Controls 1.2
import Qt.labs.folderlistmodel 2.1
import "qrc:/js/service.js" as Service
import "qrc:/js/helper.js" as Helperjs
import "qrc:/qml/genericqml"

Rectangle{
    id:imageDialog
    z:2
    border.color: "grey"
    width: parent.width-4*mm
    height:parent.height-12*mm
    x:2*mm
    y:10*mm
    property string directory: ""

    Text{
        id:directoryText
         x:0.5*mm
         y:0.5*mm
         width: imageDialog.width-15*mm
         height:contentHeight
         wrapMode: Text.Wrap
         text: directory
    }
    BlueButton{
           id:closeButton
           anchors.top: parent.top
           anchors.topMargin: 1*mm
           anchors.right: parent.right
           anchors.rightMargin: 1*mm
       text:   "\uf057"
       onClicked:{imageDialog.destroy()}
    }
      ListView {
          id: imageView
          x:0.5*mm
          y:directoryText.height+mm
          width: imageDialog.width-2*mm
          height: imageDialog.height-directoryText.height-4*mm
          clip: true
          model: imageModel
          delegate: imageItem
     }

     FolderListModel{
         id: imageModel
         nameFilters: ["*.png", "*.jpg",".jpeg","*.JPG","*.gif"]
         sortField: FolderListModel.Time
         sortReversed:false
         showDotAndDotDot: true
         showDirs: true
         showDirsFirst: true
         folder:directory
     }

     BusyIndicator{
         id: imageBusy
         anchors.horizontalCenter: imageView.horizontalCenter
         anchors.top:imageView.top
         anchors.topMargin: 2*mm
         width:10*mm
         height: 10*mm
         running:false
       }


     Component{
         id:imageItem
         Item{
             width:imageView.width
             height:folderImage.height+2*mm
             Rectangle{
                 id:imagetextRectangle
                 color:"black"
                 x:mm
                 z:3
                 opacity: fileIsDir?0:0.5
                 width:imagetext.contentWidth
                 height: imagetext.contentHeight
                 anchors.bottom: folderImage.bottom
            }
            Text {
                id:imagetext
                x:fileIsDir?11*mm:mm
                z:4
                text: fileName
                width: fileIsDir?parent.width - 12*mm :imageView.width-mm
                anchors.bottom: folderImage.bottom
                color: fileIsDir?"black":"white"
                font.pixelSize: 3*mm
                wrapMode:Text.Wrap
            }
            Image{id:folderImage
                 width: fileIsDir?10*mm: imageView.width-mm
                 fillMode:Image.PreserveAspectFit
                 source:fileIsDir?"qrc:/images/folder-blue.png":fileURL
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked:{
                        if (fileName==".."){
                            imageModel.folder=imageModel.parentFolder;
                            directory=imageModel.parentFolder
                        }
                        else if (fileIsDir){
                            imageModel.folder=fileURL;
                            directory=fileURL
                        }
                        else{
                            attachImageURLs.push(fileURL);
                           attachImage(fileURL);
                      imageDialog.destroy()
                        }
                    }
                }
          }
     }
}