/******************************************************************************
**
** 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 {

    GridLayout {
        id: grid
        anchors.left: selectors.right
        anchors.leftMargin: 8

        columns: colsSelector.value
        rows: rowsSelector.value
        flow: flowSelector.checked ? GridLayout.TopToBottom : GridLayout.LeftToRight
        layoutDirection: layoutDirectionSelector.checked ? Qt.RightToLeft : Qt.LeftToRight
        columnSpacing: colSpaceSelector.value
        rowSpacing: rowSpaceSelector.value

        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

        // NOTE: These buttons can be generalized when 'list' type is available.
        MultiValueButton {
            id: colsSelector
            title: "columns"
            value: 0
            onClicked: {
                switch (colsSelector.value) {
                case 0:
                    colsSelector.value = 2;
                    break;
                case 2:
                    colsSelector.value = 4;
                    break;
                case 4:
                    colsSelector.value = -1;
                    break;
                default:
                    colsSelector.value = 0;
                    break;
                }
            }
            visible: grid.flow == GridLayout.LeftToRight
        }
        MultiValueButton {
            id: rowsSelector
            title: "rows"
            value: 0
            onClicked: {
                switch (rowsSelector.value) {
                case 0:
                    rowsSelector.value = 2;
                    break;
                case 2:
                    rowsSelector.value = 4;
                    break;
                case 4:
                    rowsSelector.value = -1;
                    break;
                default:
                    rowsSelector.value = 0;
                    break;
                }
            }

            visible: grid.flow == GridLayout.TopToBottom
        }
        StyledCheckBox {
            id: flowSelector
            propertyName: "flow"
            propertyValue: "%1".arg(checked ? "TopToBottom" : "LeftToRight")
        }
        StyledCheckBox {
            id: layoutDirectionSelector
            propertyName: "layout"
            propertyValue: "%1".arg(checked ? "RightToLeft" : "LeftToRight")
        }

        MultiValueButton {
            id: colSpaceSelector
            title: "colSpace"
            value: 5
            onClicked: {
                switch (colSpaceSelector.value) {
                case 5:
                    colSpaceSelector.value = 20;
                    break;
                case 20:
                    colSpaceSelector.value = -10;
                    break;
                case -10:
                    colSpaceSelector.value = 0;
                    break;
                default:
                    colSpaceSelector.value = 5;
                    break;
                }
            }
        }
        MultiValueButton {
            id: rowSpaceSelector
            title: "rowSpace"
            value: 5
            onClicked: {
                switch (rowSpaceSelector.value) {
                case 5:
                    rowSpaceSelector.value = 10;
                    break;
                case 10:
                    rowSpaceSelector.value = -5;
                    break;
                case -5:
                    rowSpaceSelector.value = 0;
                    break;
                default:
                    rowSpaceSelector.value = 5;
                    break;
                }
            }
        }
    }
}