// Qt
import QtQuick 2.15

// Project

//  Qml imports
import "qrc:/compounds"
import "qrc:/globals"

Rectangle {  id: _root
    property var    initial                 : []
    property var    actual                  : []
    property var    label                   : []
    property var    units                   : []
    property var precision                  : Array(label.count).fill(0) // default all 0 precision
    property string title                   : ""

    height      :  _column.implicitHeight + 10
    width       : parent.width
    radius      : 9
    color       : Colors.panelBackgroundColor
    clip        : true

    border {
        width: 1
        color: Colors.panelBorderColor
    }

    Column { id: _column
        Rectangle { id: _header
            width       : _root.width
            height      : Variables.createRxLabelUnitContainerHeight
            color       : Colors.panelBackgroundColor
            radius      : _root.radius

            border {
                width: 1
                color: Colors.panelBorderColor
            }

            Text { id: _title
                text                : _root.title
                color               : Colors.offWhite
                font.family         : Fonts.fontFamilyFixed
                font.weight         : Font.DemiBold
                font.pixelSize      : Fonts.fontPixelTextRectTitle
                anchors {
                    left            : parent.left
                    leftMargin      : Variables.defaultMargin
                    verticalCenter  : parent.verticalCenter
                }
            }
        }

        Repeater { id: _repeater
            model   : _root.label
            height  : delegate.implicitHeight
            width   : delegate.implicitWidth

            delegate : LabelUnitContainer { id: _delegate
                text        : modelData
                color       : Colors.transparent
                width       : parent.width
                unitText    : _root.units[index]
                border.width: 0

                contentItem : Item { id: _contentItem
                    Row { id: _row
                        anchors {
                            right           : parent.right
                            rightMargin     : Variables.defaultMargin * 2
                            verticalCenter  : parent.verticalCenter
                        }
                        spacing : Variables.defaultMargin * 2

                        Text { id: _initial
                            text                : typeof _root.initial[index] === "number" ? _root.initial[index].toFixed(_root.precision[index]) ?? "" :
                                                                                             _root.initial[index]
                            color               : Colors.offWhite
                            font.pixelSize      : Fonts.fontPixelValueControl
                            verticalAlignment   : Text.AlignVCenter
                            visible             : _root.initial[index] ?? false
                        }

                        Text { id: _actual
                            text                : typeof _root.actual[index] === "number" ? _root.actual[index].toFixed(_root.precision[index]) ?? "" :
                                                                                            _root.actual[index]
                            color               : Colors.ufVolumeGoalText
                            font.pixelSize      : Fonts.fontPixelValueControl
                            verticalAlignment   : Text.AlignVCenter
                            visible             : _root.actual[index] ?? false
                        }
                    }
                }

                Line { id: _divider
                    color   : Colors.panelBorderColor
                    visible : index !== _repeater.count - 1
                    anchors {
                        bottom      : parent.bottom
                        left        : parent.left
                        leftMargin  : Variables.minVGap + Variables.defaultMargin
                        right       : parent.right
                        rightMargin : Variables.minVGap + Variables.defaultMargin
                    }
                }
            }
        }
    }
}