import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import "../components"

Item {
    id: page

    function syncColors() {
        okPicker.hex = settingsContainer.feedbackOkColor
        errorPicker.hex = settingsContainer.feedbackErrorColor
    }

    Component.onCompleted: syncColors()

    Connections {
        target: settingsContainer
        function onChanged() { page.syncColors() }
    }

    Rectangle {
        anchors.fill: parent
        color: "#161628"
    }

    ScrollView {
        anchors.fill: parent
        clip: true
        contentWidth: availableWidth
        contentHeight: fbColumn.implicitHeight + 16
        ScrollBar.vertical.policy: ScrollBar.AsNeeded

        ColumnLayout {
            id: fbColumn
            width: page.width - 16
            x: 8
            y: 8
            spacing: 12

            BackHeader { title: "Обводка отклика"; onBack: page.StackView.view.pop() }

            Text {
                Layout.fillWidth: true
                text: "Цвет и ширина свечения вокруг кнопки при успехе (ОК) и ошибке."
                color: "#cccccc"
                font.pixelSize: 12
                wrapMode: Text.Wrap
            }

            ColorPickerField {
                id: okPicker
                label: "Цвет «ОК»:"
                onColorChanged: btnController.setFeedbackColors(hex, errorPicker.hex)
            }

            LabeledSlider {
                label: "Ширина «ОК»"
                from: 0; to: 30; stepSize: 1
                value: settingsContainer.feedbackOkWidth
                onMoved: btnController.setFeedbackWidths(value, settingsContainer.feedbackErrorWidth)
            }

            ColorPickerField {
                id: errorPicker
                label: "Цвет «Ошибка»:"
                onColorChanged: btnController.setFeedbackColors(okPicker.hex, hex)
            }

            LabeledSlider {
                label: "Ширина «Ошибка»"
                from: 0; to: 30; stepSize: 1
                value: settingsContainer.feedbackErrorWidth
                onMoved: btnController.setFeedbackWidths(settingsContainer.feedbackOkWidth, value)
            }

            LabeledSlider {
                label: "Радиус свечения"
                from: 0; to: 60; stepSize: 1
                value: settingsContainer.feedbackGlowRadius
                onMoved: btnController.setFeedbackGlowRadius(value)
            }

            RowLayout {
                Layout.fillWidth: true
                Layout.topMargin: 8
                spacing: 32
                Item { Layout.fillWidth: true }
                Repeater {
                    model: [
                        { c: settingsContainer.feedbackOkColor, w: settingsContainer.feedbackOkWidth, t: "ОК" },
                        { c: settingsContainer.feedbackErrorColor, w: settingsContainer.feedbackErrorWidth, t: "Ошибка" }
                    ]
                    delegate: Rectangle {
                        width: 84; height: 84; radius: 42
                        color: "#7b007b"
                        border.color: modelData.c
                        border.width: modelData.w
                        Text {
                            anchors.centerIn: parent
                            text: modelData.t
                            color: "white"
                            font.bold: true
                        }
                        layer.enabled: settingsContainer.feedbackGlowRadius > 0
                        layer.effect: Glow {
                            radius: settingsContainer.feedbackGlowRadius
                            samples: 24
                            color: modelData.c
                            transparentBorder: true
                        }
                    }
                }
                Item { Layout.fillWidth: true }
            }

            Item { Layout.preferredHeight: 12 }
        }
    }
}