/*!
 *
 * Copyright (c) 2021-2024 Diality Inc. - All Rights Reserved.
 * \copyright
 * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
 * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
 *
 * \file    InstructionView.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      27-Jun-2022
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  14-Mar-2021
 *
 */

// Qt
import QtQuick 2.12
import QtQuick.Controls 2.12 // swipeview

// Project
//  Qml imports
import "qrc:/globals"
import "qrc:/components"

/*!
 * \brief   Contains a back button as well
 *          as the current progress in each of the steps.
 */
Rectangle { id: _root
    property string label       : ""

    property string location    : ""
    property var    stepNames   : []
    property var    stepImages  : []

    property int    fontPixelMessage    : 25
    property int    fontPixelLabel      : 20

    property alias currentStepIndex: _swipeview.currentIndex

    readonly property bool  isEmpty         : stepNames.length == 0 && stepImages.length == 0
    readonly property bool  firstStep       : isEmpty || _swipeview.currentIndex == 0
    readonly property bool  lastStep        : isEmpty || _swipeview.currentIndex == _swipeview.count - 1

    readonly property int   frameVGapTop    : 65
    readonly property int   frameVGapBottom : 45
    readonly property int   frameHGap       : 45 // * 1.5
    readonly property int   chevronWidth    : 25
    readonly property int   chevronHeight   : 35
    readonly property int   chevronMargin   : ( _root.frameHGap - _root.chevronWidth ) / 2
    readonly property int   outerRadius     : Variables.dialogRadius * 2
    readonly property int   innerRadius     : Variables.dialogRadius


    signal leftClicked ()
    signal rightClicked()

    color           : Colors.transparent
    border.color    : Colors.borderButton
    radius          : _root.outerRadius

    Rectangle { id: _innerFrame
        color           : Colors.transparent
        border.color    : Colors.line
        anchors {
            fill    : _root
            leftMargin  : _root.frameHGap
            rightMargin : _root.frameHGap
            topMargin   : _root.frameVGapTop
            bottomMargin: _root.frameVGapBottom
        }
        radius          : _root.innerRadius
        // DEBUG : This helps getting the final size of the available room for the instruction images.
        // onWidthChanged  : console.debug( " ----- ", "_innerFrame.width :" , label, width )
        // onHeightChanged : console.debug( " ----- ", "_innerFrame.height:" , label, height)
    }

    Item { id: _containerSwipeView
        clip : true // it has to be clipped although not performace friendly, otherwise the other pages will be partially shown.
        anchors {
            right   : _innerFrame.right
            left    : _innerFrame.left
            top     : _root.top
            bottom  : _root.bottom
        }
        SwipeView { id: _swipeview
            anchors.fill: parent
            Repeater {
                model: _root.stepNames
                Loader { id: _content
                    anchors.bottom: parent.bottom
                    active: SwipeView.isPreviousItem || SwipeView.isCurrentItem || SwipeView.isNextItem
                    sourceComponent: Item {
                        Text { id: _message
                            text    : _root.stepNames.length ? _root.stepNames[index] : ""
                            color   : Colors.textMain
                            width   : parent.width
                            height  : _root.frameVGapTop
                            horizontalAlignment : Text.AlignHCenter
                            verticalAlignment   : Text.AlignVCenter
                            font.pixelSize      : _root.fontPixelMessage
                        }
                        Image { id: _image
                            source: _root.stepImages.length && _root.stepImages[index] ? "file:" + _root.location + _root.stepImages[index] : ""
                            width   : _innerFrame.width
                            height  : _innerFrame.height
                            anchors.top                 : parent.top
                            anchors.topMargin           : _root.frameVGapTop
                            anchors.horizontalCenter    : parent.horizontalCenter
                            horizontalAlignment : Image.AlignHCenter
                            verticalAlignment   : Image.AlignVCenter
                            fillMode            : Image.PreserveAspectFit
                        }
                    }
                }
            }
        }
    }

    Item {
        anchors.left    : _innerFrame.left
        anchors.right   : _innerFrame.right
        anchors.top     : _innerFrame.bottom
        anchors.bottom  : _root.bottom
        Text { id: _label
            text    : _root.label
            color   : Colors.textMain
            width   : parent.width
            height  : _root.frameVGapBottom
            horizontalAlignment : Text.AlignLeft
            verticalAlignment   : Text.AlignVCenter
            font.pixelSize      : _root.fontPixelLabel
            anchors.verticalCenter: parent.verticalCenter
            anchors.left        : parent.left
        }
        StepIndicator { id: _indicator
            diameter        : 10
            spacerLineLength: 25
            visible         : _root.stepNames.length
            currentComplete : true
            hideLabels      : true
            stepNames       : _root.stepNames
            currentStepIndex: _swipeview.currentIndex
            anchors.verticalCenter: parent.verticalCenter
            anchors.right   : parent.right
        }
    }

    Image { id: _leftImage
        visible : ! _root.firstStep
        width   : _root.chevronWidth
        height  : _root.chevronHeight
        source  : "qrc:/images/iArrowLeft"
        anchors.left    : _root.left
        anchors.right   : _innerFrame.left
        anchors.verticalCenter: _root.verticalCenter
        anchors.margins : _root.chevronMargin
    }
    Image { id: _rightImage
        visible : ! _root.lastStep
        width   : _root.chevronWidth
        height  : _root.chevronHeight
        source  : "qrc:/images/iArrowRight"
        anchors.right   : _root.right
        anchors.left    : _innerFrame.right
        anchors.verticalCenter: _root.verticalCenter
        anchors.margins : _root.chevronMargin
    }

    MouseArea { id: _mouseAreaLeft
        enabled         : ! _root.firstStep
        width           : _root.frameHGap * 2 // mouse area is intenrionally set twice the size of the visible area for user convenience
        anchors.left    : _root.left
        anchors.top     : _root.top
        anchors.bottom  : _root.bottom
        onClicked       : {
            _swipeview.currentIndex--
            _root.leftClicked
        }
    }
    MouseArea { id: _mouseAreaRight
        enabled         : ! _root.lastStep
        width           : _root.frameHGap * 2 // mouse area is intenrionally set twice the size of the visible area for user convenience
        anchors.right   : _root.right
        anchors.top     : _root.top
        anchors.bottom  : _root.bottom
        onClicked       :  {
            _swipeview.currentIndex++
            _root.rightClicked
        }
    }
}