import QtQuick 2.6

import wesual.Touch 1.0

Item {
    id : delegate

    signal tapped()

    implicitWidth  : 185
    implicitHeight : 185

    function resetFlip() {
        icon.flipped = false;
    }

    Flipable {
        id : icon

        property bool flipped: false

        width  : 118
        height : 118

        anchors {
            top : parent.top
            horizontalCenter : parent.horizontalCenter
        }

        front : Image {
            sourceSize.width  : 118
            sourceSize.height : 118

            anchors.centerIn : parent

            source : "profession_icon_" + modelData.id + ".png"
        }

        back : Image {
            sourceSize.width  : 118
            sourceSize.height : 118

            anchors.centerIn : parent

            source : "profession_back.png"
        }

        transform: Rotation {
            id : rotation

            origin.x : icon.width/2
            origin.y : icon.height/2
            axis.x : 0
            axis.y : 1
            axis.z : 0
            angle : 0
        }

        states: State {
            name: "back"
            PropertyChanges {
                target : rotation
                angle : 180
            }

            when : icon.flipped
        }

        transitions: Transition {
            SequentialAnimation {
                NumberAnimation {
                    target : rotation
                    property : "angle"
                    duration : 300
                }
                PauseAnimation {
                    duration : 100
                }
                ScriptAction {
                    script : delegate.tapped()
                }
                ScriptAction {
                    script : delegate.resetFlip()
                }
            }
        }
    }



    Text {
        id : label

        text : modelData["name_" + template_.activeLanguage]

        color : "#706f6f"

        wrapMode: Text.Wrap
        horizontalAlignment : Text.AlignHCenter

        anchors {
            top : icon.bottom
            horizontalCenter : parent.horizontalCenter
            topMargin : 10
        }

        width : parent.width - 20

        font.pixelSize : 16
        font.family : "Lucida Sans Unicode"
        font.capitalization: Font.AllUppercase
    }

    TapArea {
        id : tapArea

        anchors.fill : parent
        mouseEnabled : true

        onTap : {
            icon.flipped = !icon.flipped;
        }
    }
}