import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.0
import QtQuick.Shapes 1.15

Item {
    id: __root
    property int value : 20
    property int maxValue : 25
    property alias spacing :
    RowLayout {
        id: rowLayout

        spacing: width / repeater.count * 0.15
        anchors.fill: triangleOutline
        anchors.topMargin: Math.floor(a3) + offset
        anchors.rightMargin: offset
        anchors.leftMargin: c2
        anchors.bottomMargin: offset
        property real offset : parent.width * 0.02

        //Calculate outline triangle side & corner
        property double c : Math.sqrt(Math.pow(triangleOutline.width, 2) + Math.pow(triangleOutline.height, 2))
        property double alpha : Math.asin(triangleOutline.height/c)
        property double beta: Math.abs(Math.asin(triangleOutline.width/c))

        //Calculate offset by triangle B corner
        property real c2 : Math.abs((offset * 2) / Math.sin(alpha))

        //Calculate offset by triangle A corner
        property real c3 : Math.abs(offset / Math.sin(beta))
        property real a3 : Math.sqrt(Math.pow(c3, 2) - Math.pow(offset, 2))

        Component.onCompleted: {
            console.log(beta, c3, a3 , offset)
        }

        Repeater {
            id: repeater
            model: __root.maxValue

            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Rectangle {
                    id: rectangle
                    height: (rowLayout.height / (repeater.count)) * (index)
                    color: "#b9b9b9"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    width: parent.width
                    visible : index < __root.value
                    Item {
                        id: item2
                        width: parent.width
                        height: (rowLayout.height / repeater.count)
                        anchors.bottom: parent.top
                        anchors.bottomMargin: 0
                        Shape {
                            id:triangle
                            width:parent.width
                            height: parent.height - rowLayout.spacing * (parent.height / parent.width)
                            anchors.bottom: parent.bottom
                            ShapePath {
                                fillColor: "#b9b9b9"
                                strokeColor: "#00000000"
                                strokeWidth: 0
                                startX: 0; startY: triangle.height
                                PathLine { x: triangle.width; y: 0 }
                                PathLine { x: triangle.width; y: triangle.height }
                                PathLine { x: 0; y: triangle.height }
                            }
                        }
                    }
                }
            }
        }
    }
    Shape {
        id:triangleOutline
//        width : parent.height < parent.width ? parent.width : height * 0.4
        height : parent.height - 20 > width * 0.4 ? width * 0.4 : parent.height - 20
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.leftMargin: 0
        ShapePath {
            id:trianglePath
            miterLimit: 10
            fillColor: "#00000000"
            strokeWidth: parent.width * 0.025
            strokeColor: "#b9b9b9"
            startX: 0; startY: triangleOutline.height
            joinStyle:ShapePath.MiterJoin
            PathLine { x: triangleOutline.width; y: 0 }
            PathLine { x: triangleOutline.width; y: triangleOutline.height }
            PathLine { x: 0; y: triangleOutline.height }
        }
    }

}



/*##^##
Designer {
    D{i:0;autoSize:true;formeditorColor:"#808080";formeditorZoom:1.5;height:100;width:400}
}
##^##*/