import QtQuick
import "../services" as S

Column {
    id: root

    required property var mounts
    required property color accentColor

    function _fmt(bytes) {
        if (bytes >= 1e12)
            return (bytes / 1e12).toFixed(1) + "T";
        if (bytes >= 1e9)
            return Math.round(bytes / 1e9) + "G";
        if (bytes >= 1e6)
            return Math.round(bytes / 1e6) + "M";
        return bytes + "B";
    }

    Repeater {
        model: root.mounts

        delegate: Item {
            required property var modelData
            width: root.width
            height: 22

            Text {
                id: mountLabel
                anchors.left: parent.left
                anchors.leftMargin: 12
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.target
                color: S.Theme.base05
                font.pixelSize: S.Theme.fontSize - 2
                font.family: S.Theme.fontFamily
                elide: Text.ElideRight
                width: 72
            }

            Item {
                id: mountBar
                anchors.left: mountLabel.right
                anchors.leftMargin: 6
                anchors.right: sizeLabel.left
                anchors.rightMargin: 6
                anchors.verticalCenter: parent.verticalCenter
                height: 4

                Rectangle {
                    anchors.fill: parent
                    color: S.Theme.base02
                    radius: 2
                }

                Rectangle {
                    width: parent.width * (modelData.pct / 100)
                    height: parent.height
                    color: S.Theme.loadColor(modelData.pct)
                    radius: 2
                    Behavior on width {
                        NumberAnimation {
                            duration: 200
                        }
                    }
                }
            }

            Text {
                id: sizeLabel
                anchors.right: parent.right
                anchors.rightMargin: 12
                anchors.verticalCenter: parent.verticalCenter
                text: root._fmt(modelData.usedBytes) + "/" + root._fmt(modelData.totalBytes)
                color: S.Theme.base04
                font.pixelSize: S.Theme.fontSize - 2
                font.family: S.Theme.fontFamily
                width: 72
                horizontalAlignment: Text.AlignRight
            }
        }
    }

    Item {
        width: 1
        height: 4
    }
}