/*!
 *
 * Copyright (c) 2021-2026 Diality Inc. - All Rights Reserved.
 * \copyright
 * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
 * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
 *
 * \file    StepBullet.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      20-Jul-2021
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  11-Jan-2021
 *
 */

// Qt
import QtQuick 2.12

// Project

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

/*!
 * \brief   A filled circle with text below it, used to build a step-by-step progress indicator
 */
Item { id: _root
    readonly property color color   : _circle.border.color
    property bool   currentComplete : false
    property bool   hideLabels      : false
    property bool   vertical        : false
    property string text            : ""
    property bool   complete        : false
    property bool   current         : false
    property color  colorComplete   : Colors.borderButton
    property color  colorCurrent    : currentComplete ? colorComplete : Colors.transparent
    property color  colorInComplete : Colors.borderDisableButton
    property int    fontSizeCurrent : Fonts.fontPixelStepCurrent
    property int    fontSizeNormal  : Fonts.fontPixelStepNormal
    property real   diameter  : 15


    QtObject { id: _private
        readonly property string stateNameVertical    : "vertical"    // must not have translation
        readonly property string stateNameHorizontal  : "horizontal"  // must not have translation
    }

    height  : _circle.height + (_text.visible ? _textHightRef.height : 0)
    width   : _root.diameter

    state   : _root.vertical ? _private.stateNameVertical : _private.stateNameHorizontal

    Rectangle { id: _circle
        anchors {
            verticalCenter  : parent.verticalCenter
            left            : parent.left
        }
        height      : _root.diameter
        width       : _root.diameter
        radius      : _root.diameter
        color       : _root.current ? colorCurrent  : _root.complete ? _root.colorComplete : Colors.transparent
        border.color: _root.current ? colorComplete : _root.complete ? _root.colorComplete : _root.colorInComplete
        border.width: 2
    }

    // this text is created only for the maximum(current) font info(height)
    Text { id: _textHightRef
        visible: false
        text    : _text.text
        font {
            pixelSize: _root.fontSizeCurrent
            bold     : _root.current
            italic   : _root.current
        }
    }

    Text { id: _text
        visible: ! _root.hideLabels
        anchors.top             : _circle.bottom
        anchors.horizontalCenter: _circle.horizontalCenter
        anchors.topMargin       : 5

        text    : _root.text
        color   : _root.current ? Colors.textMain : _root.complete ? Colors.textMain : _root.colorInComplete
        font {
            pixelSize: _root.current ? _root.fontSizeCurrent : _root.fontSizeNormal
            bold     : _root.current
            italic   : _root.current
        }
    }

    states: [
        State { name: _private.stateNameVertical
            AnchorChanges   { target    : _text
                anchors.top             : undefined
                anchors.horizontalCenter: undefined

                anchors.left            : _circle.right
                anchors.verticalCenter  : _circle.verticalCenter
            }

            PropertyChanges { target: _text
                anchors.topMargin       : 0
                anchors.leftMargin      : 10

            }
        },

        State { name: _private.stateNameHorizontal
            AnchorChanges   {
                anchors.top             : _circle.bottom
                anchors.horizontalCenter: _circle.horizontalCenter

                anchors.left            : undefined
                anchors.verticalCenter  : undefined
            }
            PropertyChanges { target    : _text
                anchors.topMargin       : 5
                anchors.leftMargin      : 0
            }
        }
    ]
}