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: ""
    property bool multiSelection: false

    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: 0.5*mm
        anchors.right: parent.right
        anchors.rightMargin: 1*mm
        text:   "\uf057"
        onClicked:{imageDialog.destroy()}
    }

    ListView {
        id: imageView
        x:0.5*mm
        y: Math.max(directoryText.height, closeButton.height)+mm
        width: imageDialog.width-2*mm
        height: imageDialog.height-imageView.y-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
            }
            Text {
                id:selected
                anchors.right:parent.right
                visible: attachImageURLs.indexOf(fileURL)>-1
                z:4
                text: "\u2713"
                width: 10*mm
                anchors.top: folderImage.top
                color: "green"
                font.pixelSize: 10*mm
            }

            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{
                        if (multiSelection!=true){
                            attachImageURLs.push(fileURL);
                            attachImage(fileURL);
                            imageDialog.destroy()
                        }
                        else {
                            if(selected.visible==true){
                                attachImageURLs.splice(attachImageURLs.indexOf(fileURL,1))
                                selected.visible=false
                            }
                            else{
                                attachImageURLs.push(fileURL);
                                selected.visible=true;
    
                            }
                            attachImage(fileURL)
                        }
                    }
                }
            }
          }
     }
}