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

Item {
    id: page

    function syncColors() {
        labelPicker.hex = settingsContainer.labelColor
    }

    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.layoutMode === "grid"
                onClicked: btnController.setLayoutMode("grid")
            }
            Button {
                text: "Список"
                highlighted: settingsContainer.layoutMode === "list"
                onClicked: btnController.setLayoutMode("list")
            }
        }

        LabeledSlider {
            visible: settingsContainer.layoutMode === "grid"
            label: "Колонок"
            from: 1; to: 8; stepSize: 1
            value: settingsContainer.layoutColumns
            onMoved: btnController.setLayoutColumns(value)
        }

        LabeledSlider {
            label: "Отступ"
            from: 0; to: 40; stepSize: 1
            value: settingsContainer.layoutSpacing
            onMoved: btnController.setLayoutSpacing(value)
        }

        CheckBox {
            text: "Показывать подписи"
            checked: settingsContainer.showLabels
            onToggled: btnController.setLayoutShowLabels(checked)
            contentItem: Text {
                text: parent.text
                font: parent.font
                color: "#ffffff"
                leftPadding: parent.indicator.width + parent.spacing
                verticalAlignment: Text.AlignVCenter
            }
        }

        ColorPickerField {
            id: labelPicker
            label: "Цвет подписей:"
            onColorChanged: btnController.setLayoutLabelColor(hex)
        }

        Item { Layout.fillHeight: true }
    }
}