/******************************************************************************
**
** Copyright (C) 2024 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
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")
        }
    }
}