/******************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Quick Ultralite module.
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
******************************************************************************/

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    color: "black"
    state: "cameraStopped"

    Image {
        id: background
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        source: "bg_qt.png"
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }

    Image {
        id: cameraView
        anchors.right: parent.right
        anchors.top: parent.top
        source: CameraInterface.image
        width: 0
        height: 0

        Behavior on width { NumberAnimation { duration: 500; easing.type: Easing.OutCubic } }
        Behavior on height { NumberAnimation { duration: 500; easing.type: Easing.OutCubic } }

        Component.onCompleted: {
            CameraInterface.initCamera()
        }

        SequentialAnimation on opacity {
            id: shootAnimation
            PropertyAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 200}
            PropertyAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200}
        }
    }

    Button {
        id: shootBtn
        text: "Shoot"
        width: 90
        height: 60
        opacity: 0.8
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        visible: !openBtn.visible

        onClicked: {
            shootAnimation.running = true
            CameraInterface.stopCamera()
            shootBtn.visible = false
            root.state = "cameraStarted"
        }
    }

    Button {
        id: openBtn
        text: "Start Camera"
        opacity: 0.8
        anchors.right: parent.right
        anchors.rightMargin: 30
        anchors.verticalCenter: parent.verticalCenter

        onClicked: {
            CameraInterface.startCamera()
            openBtn.visible = false
            shootBtn.visible = !openBtn.visible
            root.state = "cameraStarted"
        }
    }

    Button {
        id: closeBtn
        text: "Close"
        width: 100
        height: 45
        opacity: 0.8
        anchors.top: parent.top
        anchors.right: parent.right
        visible: !shootBtn.visible && !openBtn.visible

        onClicked: {
            CameraInterface.startCamera()
            shootBtn.visible = true
        }
    }

    Button {
        id: backBtn
        text: "Stop"
        width: 100
        height: 45
        opacity: 0.8
        anchors.top: parent.top
        anchors.left: parent.left
        visible: shootBtn.visible

        onClicked: {
            CameraInterface.stopCamera()
            shootBtn.visible = false
            openBtn.visible = true
            root.state = "cameraStopped"
        }
    }

    Button {
        id: minimizeBtn
        width: 120
        height: 45
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        opacity: 0.8
        visible: closeBtn.visible

        onClicked: {
            root.state = root.state == "cameraMinimized" ? "cameraStarted" : "cameraMinimized"
        }
    }

    states: [
        State {
            name: "cameraStopped"
            PropertyChanges { target: background; opacity: 1 }
            PropertyChanges { target: minimizeBtn; visible: false }
        },
        State {
            name: "cameraStarted"
            PropertyChanges { target: background; opacity: 0 }
            PropertyChanges { target: minimizeBtn; text: "Minimize" }
            PropertyChanges { target: cameraView; width: 480; height: 272 }
        },
        State {
            name: "cameraMinimized"
            PropertyChanges { target: background; opacity: 1 }
            PropertyChanges { target: minimizeBtn; text: "Maximize" }
            PropertyChanges { target: cameraView; width: 160; height: 91 }
        }
    ]
}