/******************************************************************************
**
** Copyright (C) 2022 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 SettingsData

Row {
    id: root

    readonly property int optionWidth: SettingsData.settingsSelectorHeight * 0.8
    readonly property int optionsSpacing: 5
    readonly property int optionsCount: 4

    height: SettingsData.settingsSelectorHeight

    Text {
        id: settingLabel

        anchors.verticalCenter: parent.verticalCenter
        text: "Background color: "
        font: SettingsData.defaultFont
    }

    Rectangle {
        id: optionsBackground

        width: root.optionWidth * root.optionsCount + root.optionsSpacing * (root.optionsCount + 2) // +2 for margins
        height: SettingsData.settingsSelectorHeight
        color: SettingsData.highlightColor

        Row {
            anchors { centerIn: parent; leftMargin: root.optionsSpacing; rightMargin: root.optionsSpacing }
            spacing: root.optionsSpacing
            height: SettingsData.settingsSelectorHeight

            Repeater {
                model: ["#41CD52", "#3CC2C9", "#FFD952", "#FF5CD6"]

                Rectangle {
                    color: (colorMa.pressed) ? SettingsData.highlightColor : modelData
                    height: root.optionWidth; width: height
                    radius: height / 2
                    anchors.verticalCenter: parent.verticalCenter

                    MouseArea {
                        id: colorMa
                        anchors.fill: parent
                        onClicked: SettingsData.backgroundColor = modelData
                    }
                }
            }
        }
    }
}