import QtQuick
import QtQuick.Controls

Item {
    id: cs
    property alias model: lv.model
    property int currentIndex: 0
    signal activated(int idx)

    function positionViewAtIndex(i, mode) { lv.positionViewAtIndex(i, mode) }

    ListView {
        id: lv
        anchors.fill: parent
        orientation: ListView.Horizontal
        spacing: 26
        boundsBehavior: Flickable.StopAtBounds
        highlightMoveDuration: 180
        highlightRangeMode: ListView.ApplyRange
        preferredHighlightBegin: width * 0.35
        preferredHighlightEnd: width * 0.65
        currentIndex: cs.currentIndex

        delegate: Item {
            width: 180
            height: parent.height

            property bool focused: (index === lv.currentIndex)

            Column {
                anchors.centerIn: parent
                spacing: 10

                Image {
                    width: focused ? 78 : 64
                    height: focused ? 78 : 64
                    source: modelData.icon
                    fillMode: Image.PreserveAspectFit
                    smooth: true
                    Behavior on width { NumberAnimation { duration: 160; easing.type: Easing.OutCubic } }
                    Behavior on height { NumberAnimation { duration: 160; easing.type: Easing.OutCubic } }
                }

                Text {
                    text: modelData.title
                    color: "white"
                    opacity: focused ? 1.0 : 0.70
                    font.pixelSize: focused ? 22 : 18
                    horizontalAlignment: Text.AlignHCenter
                    width: parent.width
                    Behavior on opacity { NumberAnimation { duration: 160 } }
                    Behavior on font.pixelSize { NumberAnimation { duration: 160 } }
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: cs.activated(index)
            }
        }
    }
}