import QtQuick 2.3
import QtQuick.Layouts 1.1

Core {
    id: container

    /*
     * Kontrolka nagłówka
     */

    /*
     * Property do ustawienia przy tworzeniu
     */

    property string     prop_title: ""                          // nagłówek parametru
    property string     prop_current_time : "12:00"
    property string     prop_current_date : "1 Styczeń 2013"
    property string     prop_current_day_of_week : "poniedziałek"
    property int        prop_button_index : 0

    /*
     * Property prywatne pozostałe
     */

    property int        prv_offset : 6
    property int        prv_border_opacity : 0
    property int        prv_initialized : 0                     // kontrolka została zainicjalizowana

    Layout.fillWidth: true
    Layout.minimumWidth: 150
    Layout.maximumWidth: 600

    Layout.fillHeight: true
    Layout.minimumHeight: 100
    Layout.maximumHeight: 250

    Layout.alignment: Qt.AlignHCenter

    width: 300
    height: 100

    color: "#00000000"

    signal valueChanged(int a_index, int a_value)

    onProp_button_indexChanged: {
        btn_back.prop_index = prop_button_index;
    }

    function buttonClicked(a_index, a_value) {
        valueChanged(a_index, a_value);
    }

    Component.onCompleted: {
        if (!prv_initialized) {
            valueChanged.connect(menuChanged);

            prv_initialized = 1;
        }
    }

    Rectangle {
        id: rec_background
        x: 0
        y: 0
        width: parent.width
        height: parent.height
        color: "lightgray"
        border.color: "gray"
        radius: 5
        opacity: 1

        Item {
            id: itm_current_hour
            x: prv_offset
            y: prv_offset
            width: 100
            height: parent.height - 2 * y

            Rectangle {
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "lightgray"
                border.color: "gray"
                opacity: prv_border_opacity
            }

            Text {
                id: txt_current_time
                x: 0
                y: 0
                width: parent.width
                height: 38
                color: "black"
                text: vqml_current_time
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                anchors.verticalCenterOffset: 0
                anchors.horizontalCenterOffset: 0
                font.family: "Nobile"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 37
            }
        }

        Item {
            id: itm_current_date_weekname
            x: itm_current_hour.x + itm_current_hour.width + prv_offset
            y: itm_current_hour.y
            width: 150
            height: parent.height - 2 * y

            Rectangle {
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "lightgray"
                border.color: "gray"
                opacity: prv_border_opacity
            }

            Text {
                id: txt_current_date
                x: 0
                y: 0
                width: parent.width
                height: 19
                color: "black"
                text: vqml_current_date
                font.pixelSize: 16
                //wrapMode: Text.WrapAnywhere
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: 0
                anchors.verticalCenterOffset: 0
                //anchors.verticalCenter: parent.verticalCenter
                font.family: "Nobile"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            Text {
                id: txt_current_day_of_week
                x: 0
                y: parent.height / 3
                width: parent.width
                height: parent.height / 3 * 2
                color: "black"
                text: vqml_current_day_of_week

                horizontalAlignment: Text.AlignHCenter
                font.family: "Mukti Narrow"
                font.strikeout: false
                font.bold: false
                font.italic: false
                fontSizeMode : Text.Fit
                minimumPixelSize: 14
                font.pixelSize: parent.height
            }
        }

        Item {
            id: itm_buttons
            x: parent.width - itm_buttons.width - prv_offset
            y: itm_current_hour.y
            width: 70
            height: parent.height - 2 * y

            Rectangle {
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "lightgray"
                border.color: "gray"
                opacity: prv_border_opacity
            }

            CS_trigger_button_graphic_01 {
                id: btn_back
                x: 0
                y: 0
                width: 70
                height: 70

                prop_grphic: "back_02.svg"
                prop_index: 11

            }
        }

        Item {
            id: itm_title
            x: itm_current_date_weekname.x + itm_current_date_weekname.width + prv_offset
            y: itm_current_hour.y
            width: parent.width - 5 * prv_offset - itm_current_hour.width - itm_current_date_weekname.width - itm_buttons.width
            height: parent.height - 2 * y

            Rectangle {
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                color: "lightgray"
                border.color: "gray"
                opacity: prv_border_opacity
            }

            Text {

                id: txt_title

                x: 0
                y: 0
                width: parent.width
                height: parent.height

                color: "#6e6e6e"
                text: prop_title
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                font.family: "Mukti Narrow"
                font.strikeout: false
                font.bold: false
                font.italic: false
                fontSizeMode : Text.Fit
                minimumPixelSize: 10
                font.pixelSize: 0.9 * parent.height

                Behavior on text {
                    SequentialAnimation {
                        NumberAnimation { target: txt_title; property: "opacity"; to: 0; duration: 150 }
                        NumberAnimation { target: txt_title; property: "opacity"; to: 1; duration: 150 }
                    }
                }

            }

        }

    }

}