// Rotation, as four little screens rather than four names.
//
// "Landscape (flipped)" and "Portrait (flipped)" are the two settings on this
// page nobody reads correctly the first time: the words describe the result,
// but what someone is looking for is the shape. The glyph is the shape, and the
// full name is a hover away for anyone who wants it spelled out.

import QtQuick
import QtQuick.Controls
import qs.config

SettingRow {
    id: root

    // [{ value, label }] -- Displays.transforms, in its own order.
    property var options: []
    property int value: 0
    property bool enabled: true

    signal selected(int value)

    controlWidth: Math.max(150, root.options.length * 48)

    Row {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        spacing: 6
        opacity: root.enabled ? 1 : 0.45

        Repeater {
            model: root.options

            Rectangle {
                id: segment

                required property var modelData

                readonly property bool current: root.value === segment.modelData.value
                readonly property int orientation: Number(segment.modelData.value)
                // 1 and 3 are the portrait transforms; 2 and 3 are the flipped
                // ones. The glyph is those two facts drawn.
                readonly property bool portrait: segment.orientation === 1 || segment.orientation === 3
                readonly property bool flipped: segment.orientation >= 2

                width: 42
                height: 32
                radius: 9
                color: segment.current
                    ? Theme.alpha(Theme.accent, 0.22)
                    : Theme.alpha(Theme.fg, segmentHover.hovered && root.enabled ? 0.12 : 0.06)
                border.width: 1
                border.color: segment.current
                    ? Theme.alpha(Theme.accent, 0.5)
                    : Theme.alpha(Theme.fg, 0.08)

                Accessible.role: Accessible.Button
                Accessible.name: String(segment.modelData.label ?? "")

                ToolTip.visible: segmentHover.hovered
                ToolTip.delay: 400
                ToolTip.text: String(segment.modelData.label ?? "")

                // The screen itself: portrait is the same rectangle stood up.
                Rectangle {
                    anchors.centerIn: parent
                    width: segment.portrait ? 12 : 17
                    height: segment.portrait ? 17 : 12
                    radius: 3
                    color: "transparent"
                    border.width: 2
                    border.color: segment.current ? Theme.fg : Theme.fgDim

                    // The thick edge is the bottom of the picture, so a flipped
                    // screen is one whose bottom is somewhere unexpected. Two
                    // rectangles rather than one with switched anchors: an
                    // anchor bound to undefined is not reliably released.
                    Rectangle {
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        anchors.margins: 2
                        height: 3
                        radius: 1
                        border.width: 0
                        visible: segment.flipped && !segment.portrait
                        color: segment.current ? Theme.fg : Theme.fgDim
                    }

                    Rectangle {
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        anchors.right: parent.right
                        anchors.margins: 2
                        width: 3
                        radius: 1
                        border.width: 0
                        visible: segment.flipped && segment.portrait
                        color: segment.current ? Theme.fg : Theme.fgDim
                    }
                }

                HoverHandler {
                    id: segmentHover
                    enabled: root.enabled
                    cursorShape: Qt.PointingHandCursor
                }

                TapHandler {
                    enabled: root.enabled && !segment.current
                    onTapped: root.selected(segment.orientation)
                }
            }
        }
    }
}