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";
    }

    function _barColor(pct) {
        const t = Math.max(0, Math.min(100, pct)) / 100;
        const a = t < 0.5 ? S.Theme.base0B : S.Theme.base0A;
        const b = t < 0.5 ? S.Theme.base0A : S.Theme.base08;
        const u = t < 0.5 ? t * 2 : (t - 0.5) * 2;
        return Qt.rgba(a.r + (b.r - a.r) * u, a.g + (b.g - a.g) * u, a.b + (b.b - a.b) * u, 1);
    }

    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: root._barColor(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
    }
}