/*!
 *
 * Copyright (c) 2023-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    SettingsROInput.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      18-Jul-2023
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  18-Jul-2023
 *
 */

// Qt
import QtQuick                  2.12
import QtQuick.Controls         2.12 // Switch


//  Qml imports
import "qrc:/globals"

/*!
 * \brief   SettingsROInput is the screen
 *          which enables the Ro Water Input
 */
SettingsBase    { id: _root
    itemIndex       : SettingsStack.Localization
    confirmVisible  : true
    notificationText: vLocalization.notification


    Row { id: _settingsRoInputRow
        anchors.centerIn: parent

        Text { id                   : _settingsLanguageLabel
            text                    : qsTr("Language")
            width                   : 150
            height                  : _settingsLanguageCombo.height
            color                   : Colors.white
            font.pixelSize          : Fonts.fontPixelTextRectTitle
            verticalAlignment       : Text.AlignVCenter
            horizontalAlignment     : Text.AlignLeft
        }

        // FIXME: This combobox needs to be a global Component
        ComboBox { id                               : _settingsLanguageCombo
            currentIndex                            : vLocalization.languageIndex
            displayText                             : currentText
            font.pixelSize                          : Fonts.fontPixelTextRectTitle
            width                                   : 300
            height                                  : 55
            padding                                 : 10
            model                                   : vLocalization.languageList

            background                              : Rectangle {
                color                               : Colors.transparent
                border.color                        : enabled ? Colors.borderButton : Colors.borderDisableButton
                radius                              : Variables.dialogRadius
            }

            delegate: ItemDelegate                  { id : _settingsLanguageDelegate
                width                               : _settingsLanguageCombo.width // + anchors.margins - 2 // 2 is the border width
                height                              : 50
                contentItem: Text                   {
                    text                            : modelData
                    color                           : Colors.textMain
                    font                            : _settingsLanguageCombo.font
                    padding                         : 10
                    verticalAlignment               : Text.AlignVCenter
                }
                background                          : Rectangle {
                    anchors.fill                    : parent
                    anchors.margins                 : 10 / 2
                    visible                         : _settingsLanguageDelegate.down || _settingsLanguageDelegate.highlighted || _settingsLanguageDelegate.visualFocus
                    color                           : _settingsLanguageDelegate.down ? Colors.backgroundButtonSelect    :
                                                                              Colors.backgroundButtonSelectDark
                }
                highlighted                         : _settingsLanguageCombo.highlightedIndex === index
            }
            popup: Popup {
                y                                   : _settingsLanguageCombo.height
                x                                   :                     - _settingsLanguageCombo.anchors.leftMargin
                width                               : _settingsLanguageCombo.width + _settingsLanguageCombo.anchors.leftMargin
                implicitHeight                      : contentItem.implicitHeight
                contentItem                         : ListView {
                    clip                            : true
                    implicitHeight                  : contentHeight
                    currentIndex                    : _settingsLanguageCombo.highlightedIndex
                    model                           : _settingsLanguageCombo.popup.visible ? _settingsLanguageCombo.delegateModel : null
                }
                background: Rectangle               {
                    color                           : Colors.backgroundMain
                    border.color                    : Colors.borderButton
                    radius                          : Variables.dialogRadius
                }
            }
        }
    }

    onConfirmClicked    : {
        _confirmDialog.titleText = _root.title
        _confirmDialog.open()
    }

    Connections { target: _confirmDialog
        function onAccepted() {
            if ( _confirmDialog.titleText == _root.title ) { // use the title as the indication of what has been confirmed and if that is related to this function.
                vLocalization.doAdjustment(_settingsLanguageCombo.currentIndex)
            }
        }
    }

    Connections { target: _settingsLanguageCombo

        function onCurrentIndexChanged() {
            vLocalization.notification = ""
        }
    }

    onVisibleChanged: {
        if (visible) {
            vLocalization.notification = ""
        }
    }
}