/*!
 *
 * 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

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

Rectangle { id: _root
    property string title           : ""
    property var    stepNames       : []
    property var    stepImages      : []
    property int    currentIndex    : 0

    color           : Colors.offWhite
    radius          : Variables.alarmDialogRadius
    clip            : true

    onVisibleChanged: if (visible) { _autoStepControl.isPlaying = false }

    AutoStepController { id: _autoStepControl
        anchors {
            left            : parent.left
            leftMargin      : Variables.defaultMargin * 3
            verticalCenter  : _title.verticalCenter
        }

        onTriggered : _root.currentIndex = (_root.currentIndex + 1) % _instrutionSteps.count
    }

    Text { id: _title
        anchors {
            left        : _autoStepControl.right
            leftMargin  : Variables.defaultMargin * 2 // with current resolution this makes the screen look nice
            top         : parent.top
            topMargin   : Variables.defaultMargin * 2 // with current resolution this makes the screen look nice
        }
        text            : _root.title
        color           : Colors.backgroundMainMenu
        font.pixelSize  : Fonts.fontPixelInstructionTitle
        font.weight     : Font.Medium
    }

    Item { id: _instructionContainer
        anchors {
            right   : _root.right
            left    : _autoStepControl.left
            top     : _title.bottom
            bottom  : _root.bottom
        }

        HelpNotification { id: _infoItem
            anchors {
                left        : parent.left
                top         : parent.top
                topMargin   : Variables.defaultMargin
            }
        }

        Column { id: _contentColumn
            anchors {
                top         : _infoItem.bottom
                topMargin       : Variables.defaultMargin
            }

            spacing             : 5
            width               : parent.width / 2

            Repeater { id: _instrutionSteps
                model: _root.stepNames

                delegate: Item { id: _delegate
                    width   : _contentColumn.width
                    height  : Variables.instructionHeight

                    Rectangle { id: _stepRect
                        anchors.left            : parent.left
                        anchors.verticalCenter  : parent.verticalCenter

                        height  : 50
                        width   : height
                        radius  : height
                        color   : index === _root.currentIndex ?  Colors.backgroundMainMenu : Colors.offWhite
                        border {
                            color: Colors.backgroundMainMenu
                            width: 2
                        }

                        Text { id: _stepNumberRect
                            anchors.centerIn: parent
                            text            : index + 1
                            color           : index === _root.currentIndex ? Colors.offWhite :  Colors.backgroundMainMenu
                            font.pixelSize  : 28
                            font.weight     : Font.Medium
                        }
                    }

                    Text { id: _message
                        anchors {
                            left            : _stepRect.right
                            leftMargin      : Variables.defaultMargin * 2 // with current resolution this makes the screen look nice
                            right           : parent.right
                            verticalCenter  : parent.verticalCenter
                        }
                        text            : _root.stepNames.length        ? _root.stepNames[index]    : ""
                        font.weight     : index === _root.currentIndex  ? Font.Medium               : Font.Normal
                        color           : index === _root.currentIndex  ? "#18559E"                 : Colors.alarmDialogText
                        wrapMode        : Text.WordWrap
                        font.pixelSize  : Fonts.fontPixelInstructionStep
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            _root.currentIndex = index
                        }
                    }
                }
            }
        }

        Image { id: _image
            anchors.right   : parent.right
            source          : _root.stepImages.length && _root.stepImages[_root.currentIndex] ? _root.stepImages[_root.currentIndex] : ""
        }
    }
}