// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick
import QtQuick.Layouts

Item {
    ColumnLayout {
        id: columnlayout
        anchors.left: selectors.right
        anchors.leftMargin: 8

        spacing: spaceSelector.value
        layoutDirection: layoutDirectionSelector.checked ? Qt.RightToLeft : Qt.LeftToRight

        ColorBox {
            id: cell00
            colorName: "Red"
            width: 52
        }
        ColorBox {
            id: cell01
            colorName: "Crimson"
            height: 40
        }
        ColorBox {
            id: cell02
            colorName: "Tomato"
        }
        ColorBox {
            id: cell03
            colorName: "Salmon"
            width: 64
        }
        ColorBox {
            id: cell10
            colorName: "Green"
        }
        ColorBox {
            id: cell11
            colorName: "Olive"
            height: 24
        }
        ColorBox {
            id: cell12
            colorName: "Teal"
        }
        ColorBox {
            id: cell13
            colorName: "Lime"
            width: 52
        }
        ColorBox {
            id: cell20
            colorName: "Brown"
            width: 60
            height: 48
        }
        ColorBox {
            id: cell21
            colorName: "Chocolate"
        }
        ColorBox {
            id: cell22
            colorName: "Goldenrod"
            visible: false
        }
        ColorBox {
            id: cell23
            colorName: "Tan"
        }
    }

    ColumnLayout {
        id: selectors
        anchors.left: parent.left
        anchors.leftMargin: 4

        MultiValueButton {
            id: spaceSelector
            title: "spacing"
            value: 5
            onClicked: {
                switch (spaceSelector.value) {
                case 5:
                    spaceSelector.value = 10
                    break
                case 10:
                    spaceSelector.value = -5
                    break
                case -5:
                    spaceSelector.value = 0
                    break
                default:
                    spaceSelector.value = 5
                    break
                }
            }
        }

        StyledCheckBox {
            id: layoutDirectionSelector
            propertyName: "layout"
            propertyValue: "%1".arg(checked ? "RightToLeft" : "LeftToRight")
        }
    }
}