import QtQuick 2.5
import QtWebEngine 1.2
import QtQuick.Window 2.1
//import Qt.labs.controls 1.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import ApplicationLauncher 1.0

import "qrc:/Globals"
import "Menu" as Menu

import QtQuick.FreeVirtualKeyboard 1.0

Rectangle {
    property int buttImgBorder: 5 // in percent of parent.height defaults to 20%
    property string buttCamImage: "/images/LiveMode_Button.svg"
    property string buttmenuArea: "/images/LockButton.svg"
    property int buttRadius: 0
    property bool buttCam1Visible: false
    property bool buttCam2Visible: false
    property int camSelected: -1
    property color buttGradientStart: "darkgray"
    property color buttGradientStop: "black"
    property color buttGradientSelectedStart: Globals.customer_color_base
    property color buttGradientSelectedStop: Globals.customer_color_base
    property bool menuRightBorder: true
    property int menuOffset: 115

    function whichCamSet() {
        var _camSelected = settings.value("COMMON/CamSelected","-");
        var ret = "0.0.0.0";

        if (_camSelected.toString() === "1") {
            camSelected = 1;
            ret = settings.value("CAM1SETTINGS/IpAddress","0.0.0.0");
        } else if (_camSelected.toString() === "2") {
            camSelected = 2;
            ret = settings.value("CAM2SETTINGS/IpAddress","0.0.0.0");
        }

        if ((_camSelected === "-" ) || (ret === "0.0.0.0")) {
            if (settings.value("CAM1SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0") {
                settings.setValue("COMMON/CamSelected", "1");
                camSelected = 1;
                ret = settings.value("CAM1SETTINGS/IpAddress","0.0.0.0");
            } else if (settings.value("CAM2SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0") {
                settings.setValue("COMMON/CamSelected", "2");
                camSelected = 2;
                ret = settings.value("CAM2SETTINGS/IpAddress","0.0.0.0");
            }
        }

        buttCam1Visible =  (settings.value("CAM1SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0")?true:false;
        buttCam2Visible =  (settings.value("CAM2SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0")?true:false;

        return ret;
    }

    property string camURL : ""

    id: root
    width: parent.width
    height: parent.height
    color: "white"

    Timer {
        id: urlTIMER
        interval: 2500
        running: false
        repeat: false
        onTriggered: {
            testWebsite.appName = "curl --insecure -m 3 -Is " + camURL;
            if(menuAREA.z === 1) {
                testWebsite.launchScript();
            } else {

            }
        }
    }

    CustomBusyIndicator{
        property alias running: urlchangeBUSY.visible

        id:urlchangeBUSY
        anchors.centerIn: parent
        //x: (popupWIN.width - popupWIN.height) / 2
        width: parent.height * 0.75
        height: parent.height * 0.75
        bBgColor: Globals.customer_color_base
        bLength:50
        opacity: 0.75
        visible: false
    }

    ApplicationLaunch {
        id: testWebsite
        arguments: ""

        onAppFinished: {
            if(exitCode != 0) {
                console.debug("----> URL Code ", exitCode );
                mainview.visible = false;
                mainview.url = "";
                mainview.url = "xx";
                urlchangeBUSY.visible = true;
                urlTIMER.interval = 2500;
                if(urlTIMER.running == false) {
                    urlTIMER.restart();
                }
            } else {
                urlTIMER.stop();
                mainview.url = "";
                mainview.url = camURL;
                urlchangeBUSY.visible = false;
                mainview.visible = true;
            }
        }
    }

    Component.onCompleted: {
        urlchangeBUSY.visible = true;
        camURL = whichCamSet();

        testWebsite.appName = "curl --insecure -m 3 -Is " + camURL;

        testWebsite.launchScript();
        console.debug("CAMURL Component.onCompleted :" + camURL);
    }

    onVisibleChanged: {
        console.debug("Start.qml onVisible changed :" + visible);
        if (visible) {
            if (camURL !== whichCamSet()) {
                console.debug("CAMURL onVisible changed :" + camURL);
                camURL = whichCamSet();

                testWebsite.appName = "curl --insecure -m 3 -Is " + camURL;

                testWebsite.launchScript();
                console.debug("CAMURL onVisibleChanged :" + camURL);
            }
            mainview.visible = mainview.focus = true
        } else {
            mainview.visible = mainview.focus = false
            Qt.inputMethod.hide();
        }
    }

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: root.width
        contentHeight: root.height
        interactive: contentHeight > height
        flickableDirection: Flickable.VerticalFlick
        clip: true

        Item {
            id: content
            x: 0
            y: 0
            width: flickable.width
            //============================================================================
            Rectangle {
                id: rectangle
                x: 0
                y: 0
                width: parent.width
                height: parent.height
                //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                WebEngineView {
                    id: mainview
                    width: flickable.contentWidth
                    height: flickable.contentHeight
                    x: 0
                    y: 0

                    onCertificateError: {
                        console.debug("<<<<<<<<<<<<<<<<<<<<<CERT ERROR>>>>>>>>>>>>>>>>>>>>>>>>>>>");
                        console.log(error.description);
                        error.ignoreCertificateError();
                    }

                    onVisibleChanged:  {
                        console.debug("<<<<<<<<<<<<<<<<<<<<<VISIBLECHANGED>>>>>>>>>>>>>>>>>>>>>>>>>>>");
                        console.debug("VISIBLE : " + visible);
                    }

                    onNewViewRequested: {
                        console.debug("<<<<<<<<<<<<<<<<<<<<<NEWVIEWREQUESTED>>>>>>>>>>>>>>>>>>>>>>>>>>>");
                        console.debug("MSG : " + message);

                    }

                    onFeaturePermissionRequested:  {
                        console.debug("<<<<<<<<<<<<<<<<<<<<<FEATUREPERMISSIONREQUEST>>>>>>>>>>>>>>>>>>>>>>>>>>>");
                        console.debug("MSG : " + message);
                    }

                    onJavaScriptConsoleMessage: {
                        console.debug("<<<<<<<<<<<<<<<<<<<<<JSConsoleMessage>>>>>>>>>>>>>>>>>>>>>>>>>>>");
                        console.debug("MSG : " + message);
                    }

                    Component.onCompleted: {
                        Qt.inputMethod.hide();
                    }

                } // WebEngineView

                Rectangle {
                    id: menuHIDDEN
                    x: 0
                    y: 0
                    z: menuAREA.z === 1 ? -1 : 1

                    width: height
                    height: 60
                    color: "lightgray"
                    opacity: 0.05
                    visible: z === 1 ? true:false

                    MouseArea {
                        x: parent.x
                        y: parent.y
                        width: parent.height
                        height: parent.width

                        onClicked: {
                            menuAREA.z = menuAREA.z === -1 ?menuAREA.z = 1: menuAREA.z = -1;
                            menuAREATimer.start();
                            sysinfo.beep();
                        }
                    }
                }

                Rectangle {
                    id: menuAREA
                    x: menuRightBorder?parent.width - width - menuOffset:menuOffset
                    y: 0
                    z: -1
                    width: height * 4
                    height: 60
                    color: "lightgray"
                    opacity: 0.75
                    visible: z === 1 ? true:false

                    Rectangle {
                        x: parent.width - 4 * parent.height
                        y: parent.y
                        width: parent.height
                        height: parent.height
                        z: menuAREA.z
                        visible: z === 1 ? true:false
                        color: "lightgray"
                        opacity: parent.opacity

                        Image {
                            anchors.centerIn: parent
                            fillMode: Image.PreserveAspectFit
                            source: buttmenuArea
                            sourceSize.height: parent.height * 0.7 //- parent.height * (buttImgBorder / 100.0)
                            sourceSize.width: parent.width * 0.7 //- parent.width * (buttImgBorder / 100.0)
                            height: sourceSize.height
                            width:sourceSize.width
                            visible: parent.visible
                        }
                    }

                    MouseArea {
                        x: parent.width - 4 * parent.height
                        y: parent.y
                        z: menuAREA.z
                        width: parent.height //parent.width - 3 * parent.height
                        height: parent.height

                        onPressAndHold: {
                            camURL = whichCamSet();

                            testWebsite.appName = "curl --insecure -m 3 -Is " + camURL;

                            testWebsite.launchScript();

                            sysinfo.beep();
                            sysinfo.beep();
                            console.debug("RELOAD Website:: " + mainview.url);
                        }
                        onClicked: {
                            stackView.push(Qt.resolvedUrl("PWD_Container.qml"));
                            sysinfo.beep();
                        }
                    }

                    Timer {
                        interval: 1
                        running: Globals.startTO.length > 0 ? true:false
                        onTriggered: {
                            if (Globals.startTO.length > 0) {
                                stackView.push(Qt.resolvedUrl("PWD_Container.qml"));
                            }
                        }
                    }

                    Label {
                        id: xLABEL
                        x: parent.width - parent.height
                        y: parent.y
                        z: menuAREA.z

                        width: parent.height
                        height: parent.height
                        opacity: parent.opacity
                        visible: z === 1 ? true:false

                        font.family: "FontAwesome"
                        font.bold: false
                        color: "red"
                        text: "\uf057" //remove-sign

                        font.pixelSize: parent.height
                    }

                    Button {
                        property string in2: Globals.in2Status

                        id: buttonCam2
                        x: parent.width - 2 * parent.height
                        y: parent.y
                        z: menuAREA.z

                        height: parent.height
                        width: height
                        opacity: parent.opacity
                        visible: z === 1 ? buttCam2Visible:false
                        Image {
                            anchors.centerIn: parent
                            fillMode: Image.PreserveAspectFit
                            source: buttCamImage
                            sourceSize.height: parent.height - parent.height * (buttImgBorder / 100.0)
                            sourceSize.width: parent.width - parent.width * (buttImgBorder / 100.0)
                            height: sourceSize.height
                            width:sourceSize.width
                            visible: parent.visible
                        }
                        background: Rectangle {
                            radius: buttRadius
                            visible: parent.visible
                            gradient: Gradient {
                                GradientStop { position:0 ; color: camSelected === 2?buttGradientSelectedStart:buttGradientStart }
                                GradientStop { position:1 ; color: camSelected === 2?buttGradientSelectedStop:buttGradientStop }
                            }
                        }
                        onClicked: {
                            if(settings.value("CAM2SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0" ) {
                                settings.setValue("COMMON/CamSelected", "2");
                                camSelected = 2;
                                root.visible = false;
                                root.visible = true;
                            }
                            sysinfo.beep();
                        }

                        onIn2Changed: {
                            if((settings.value("CAM2SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0" ) &&
                                    (Globals.in2Status == "2")){
                                settings.setValue("COMMON/CamSelected", "2");
                                camSelected = 2;
                                root.visible = false;
                                root.visible = true;
                            }
                            sysinfo.beep();
                        }
                    }

                    Button {
                        property string in1: Globals.in1Status

                        id: buttonCam1
                        x: parent.width - 3 * parent.height
                        y: parent.y
                        z: menuAREA.z

                        height: parent.height
                        width: height
                        opacity: parent.opacity
                        visible: z === 1?buttCam1Visible:false

                        Image {
                            anchors.centerIn: parent
                            fillMode: Image.PreserveAspectFit
                            source: buttCamImage
                            sourceSize.height: parent.height - parent.height * (buttImgBorder / 100.0)
                            sourceSize.width: parent.width - parent.width * (buttImgBorder / 100.0)
                            height: sourceSize.height
                            width:sourceSize.width
                            visible: parent.visible
                        }
                        background: Rectangle {
                            radius: buttRadius
                            visible: parent.visible
                            gradient: Gradient {
                                GradientStop { position:0 ; color: camSelected === 1?buttGradientSelectedStart:buttGradientStart }
                                GradientStop { position:1 ; color: camSelected === 1?buttGradientSelectedStop:buttGradientStop }
                            }
                        }
                        onClicked: {
                            if(settings.value("CAM1SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0" ) {
                                settings.setValue("COMMON/CamSelected", "1");
                                camSelected = 1;
                                root.visible = false;
                                root.visible = true;
                            }
                            sysinfo.beep();
                        }
                        onIn1Changed: {
                            if((settings.value("CAM1SETTINGS/IpAddress","0.0.0.0") !== "0.0.0.0" ) &&
                                    (Globals.in1Status == "1")){
                                settings.setValue("COMMON/CamSelected", "1");
                                camSelected = 1;
                                root.visible = false;
                                root.visible = true;
                            }
                            sysinfo.beep();
                        }

                    }

                    MouseArea {
                        id: xAREA
                        x: xLABEL.x
                        y: xLABEL.y
                        width: xLABEL.width
                        height: xLABEL.height
                        z: menuAREA.z

                        onClicked: {
                            menuAREA.z = menuAREA.z === 1 ? -1: 1;
                            //menuAREATimer.start();
                            sysinfo.beep();
                        }
                    }
                }
                Timer {
                    id : menuAREATimer
                    interval: 15000
                    running: false
                    repeat: false

                    onTriggered: {
                        menuAREA.z = menuAREA.z === 1 ? -1:  1;
                    }
                }
            }
            //============================================================================
        }
    }
}