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

Item {
    id: page

    function syncColors() {
        c1Picker.hex = settingsContainer.backgroundColor1
        c2Picker.hex = settingsContainer.backgroundColor2
    }

    Component.onCompleted: syncColors()

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

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

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 12

        BackHeader { title: "Фон"; onBack: page.StackView.view.pop() }

        RowLayout {
            Layout.fillWidth: true
            Text {
                text: "Тип:"
                color: "#ffffff"
            }
            Item { Layout.fillWidth: true }
            Button {
                text: "Градиент"
                highlighted: settingsContainer.backgroundType === "gradient"
                onClicked: btnController.setBackgroundType("gradient")
            }
            Button {
                text: "Цвет"
                highlighted: settingsContainer.backgroundType === "solid"
                onClicked: btnController.setBackgroundType("solid")
            }
            Button {
                text: "Картинка"
                highlighted: settingsContainer.backgroundType === "image"
                onClicked: btnController.setBackgroundType("image")
            }
        }

        ColumnLayout {
            Layout.fillWidth: true
            visible: settingsContainer.backgroundType !== "image"
            spacing: 8

            ColorPickerField {
                id: c1Picker
                label: "Цвет 1:"
                onColorChanged: btnController.setBackgroundColors(hex, c2Picker.hex)
            }

            ColorPickerField {
                id: c2Picker
                label: "Цвет 2:"
                visible: settingsContainer.backgroundType === "gradient"
                onColorChanged: btnController.setBackgroundColors(c1Picker.hex, hex)
            }
        }

        CheckBox {
            visible: settingsContainer.backgroundType === "gradient"
            text: "Анимация"
            checked: settingsContainer.backgroundAnimated
            onToggled: btnController.setBackgroundAnimated(checked)
            contentItem: Text {
                text: parent.text
                font: parent.font
                color: "#ffffff"
                leftPadding: parent.indicator.width + parent.spacing
                verticalAlignment: Text.AlignVCenter
            }
        }

        ColumnLayout {
            visible: settingsContainer.backgroundType === "image"
            Layout.fillWidth: true
            Text {
                text: "Имя файла фона (из папки иконок):"
                color: "#ffffff"
            }
            RowLayout {
                Layout.fillWidth: true
                ComboBox {
                    id: bgImageCombo
                    Layout.fillWidth: true
                    model: btnController.listIcons()
                    Component.onCompleted: {
                        var i = model.indexOf(settingsContainer.backgroundImage)
                        if (i >= 0) currentIndex = i
                    }
                    onActivated: btnController.setBackgroundImage(currentText)
                }
                Button {
                    text: "\u21BB"
                    onClicked: bgImageCombo.model = btnController.listIcons()
                }
            }
            Text {
                Layout.fillWidth: true
                text: "Папка иконок:\n" + settingsContainer.iconsDir
                color: "#cccccc"
                font.pixelSize: 11
                wrapMode: Text.Wrap
            }
        }

        Item { Layout.fillHeight: true }
    }
}