import QtQuick
import QtQuick.Shapes
import qs.modules.common.utils

Item {
    id: root
    property real scale: 1
    property color color: "white"
    // 0 = no bars, 1 = innermost bar only, 2 = two bars, 3 = all three bars
    property int bars: 3

    width: scale
    height: scale

    // Icon from Material Symbols by Google
    // https://github.com/google/material-design-icons/blob/master/LICENSE
    // SVG deconstructed to allow dynamically changing the amount of visible bars.

    Shape {
        anchors.centerIn: parent
        width: root.width
        height: root.height
        preferredRendererType: Shape.CurveRenderer
        fillMode: Shape.PreserveAspectFit
        transformOrigin: Item.TopLeft

        // Innermost bar (opaque when bars >= 1)
        ShapePath {
            fillColor: root.bars >= 1 ? root.color : ColorUtils.transparentize(root.color, 0.75)
            strokeColor: "transparent"
            PathSvg {
                path: "M12 14.5q-.95 0-1.85.25t-1.7.75q-.45.275-.975.263t-.9-.388t-.35-.875t.45-.8q1.175-.825 2.525-1.263T12 12t2.8.438t2.525 1.262q.425.3.45.8t-.35.875t-.9.388t-.975-.263q-.8-.5-1.7-.75T12 14.5"
            }
        }

        // Middle bar (opaque when bars >= 2)
        ShapePath {
            fillColor: root.bars >= 2 ? root.color : ColorUtils.transparentize(root.color, 0.75)
            strokeColor: "transparent"
            PathSvg {
                path: "M12 10.5q-1.75 0-3.375.538T5.6 12.625q-.425.325-.937.313t-.888-.388q-.35-.375-.337-.875t.412-.825q1.75-1.4 3.838-2.125T12.025 8t4.325.725t3.825 2.1q.4.325.425.838t-.35.887t-.9.388t-.95-.313q-1.4-1.05-3.037-1.588T12 10.5"
            }
        }

        // Outermost bar (opaque when bars >= 3)
        ShapePath {
            fillColor: root.bars >= 3 ? root.color : ColorUtils.transparentize(root.color, 0.75)
            strokeColor: "transparent"
            PathSvg {
                path: "M12 6.5q-2.55 0-4.913.85T2.775 9.775q-.425.35-.937.338T.95 9.725t-.362-.887T1 7.975q2.325-1.95 5.15-2.962T12 4t5.85 1.013T23 7.975q.4.35.413.863t-.363.887t-.888.388t-.937-.338Q19.275 8.2 16.913 7.35T12 6.5"
            }
        }

        // Central element (always opaque)
        ShapePath {
            fillColor: root.color
            strokeColor: "transparent"
            PathSvg {
                path: "M12 20q-.825 0-1.412-.587T10 18t.588-1.412T12 16t1.413.588T14 18t-.587 1.413T12 20"
            }
        }
    }
}