import QtQuick 2.7
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
import "qrc:/js/smiley.js" as Smileyjs
import "qrc:/js/helper.js" as Helperjs
import "qrc:/qml/genericqml"

Rectangle{
    id:smileyDialog
    x: mm
    width: messageColumn.width-5*mm
    height:root.height/3
    
    BlueButton{
       id:closeButton
       anchors.top: parent.top
       anchors.topMargin: 1*mm
       anchors.right: parent.right
       anchors.rightMargin: 1*mm
       text:   "\uf057"
       onClicked:{smileyDialog.destroy()}
    }

    TabView{
        id:smileyTabView
        tabPosition: Qt.BottomEdge
        anchors.top: closeButton.bottom
        anchors.topMargin: 1*mm
        width: smileyDialog.width-2*mm
        height: smileyDialog.height-7*mm
        currentIndex: 0
        style: TabViewStyle {
            frameOverlap: 1
            tab: Rectangle {
               color: "white"
               implicitWidth: smileyTabView.width/3-2*mm
               implicitHeight: 4*mm
               Text { id: text
                  anchors.centerIn: parent
                  text: styleData.title
                  color: "dark grey"
                  font.pixelSize:2.5*mm
                  font.bold: styleData.selected
               }
            }
            frame: Rectangle { color: "light grey" }
            tabsAlignment:Qt.AlignHCenter
         }

      Tab{
        title: qsTr("Standard")
        Rectangle{
            id: coreGridTab
            GridView {
                  id: coreSmileyView
                  anchors.fill: parent
                  cellWidth: 5*mm
                  cellHeight: 5*mm
                  clip: true
                  model: coreSmileyModel
                  delegate: smileyItem
             }

             ListModel{
                 id: coreSmileyModel
             }

             Component.onCompleted:{
                var smileyarray=Smileyjs.core
                for (var icon in smileyarray){
                    coreSmileyModel.append({"emoji":smileyarray[icon]})
                }
             }
         }
      }
      Tab{
        title: qsTr("Addon")
        Rectangle{
            id: addonGridTab
            GridView {
                  id: addonView
                  anchors.fill: parent
                  cellWidth: 5*mm
                  cellHeight: 5*mm
                  clip: true
                  model: addonModel
                  delegate: smileyItem
             }

             ListModel{
                 id: addonModel
             }
        Component.onCompleted:{
                for (var icon in Smileyjs.addon){
                    addonModel.append({"emoji":Smileyjs.addon[icon]})
                }
            }
        }
    }
    Tab{
        title: qsTr("Adult")
        Rectangle{
            id: adultGridTab
            GridView {
                  id: adultView
                  anchors.fill: parent
                  cellWidth: 5*mm
                  cellHeight: 5*mm
                  clip: true
                  model: adultModel
                  delegate: smileyItem
             }

             ListModel{
                 id: adultModel
             }
        Component.onCompleted:{
                for (var icon in Smileyjs.adult){
                    adultModel.append({"emoji":Smileyjs.adult[icon]})
                }
            }
        }
      }
    }
    Component{
         id:smileyItem
         AnimatedImage{id:smileyImage
             width:4.5*mm
             height: 4.5*mm
             fillMode:Image.PreserveAspectFit
             source:emoji.url
          
            MouseArea{
                anchors.fill: parent
                onClicked:{
                     bodyField.append(emoji.name+" ")
                     smileyDialog.destroy()
                    }
                }
            }
         }
    }