import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: item

    required property int index
    required property string name
    required property string description
    required property string info
    required property int amount
    required property real factor

    property real detailsOpacity: 0
    width: ListView.view.width
    height: 70

    Rectangle {
        id: background
        x: 2
        y: 2
        width: parent.width - x * 2
        height: parent.height - y * 2
        color: wccDarkLight
        border.color: index === listView.currentIndex ? "blue" : wccDarkDefault
        border.width: 3
        radius: 5
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: mouse => {
                       parent.ListView.view.currentIndex = parent.index
                       if (mouse.button === Qt.RightButton) {
                           item.state = 'Details'
                       }
                   }
    }

    Row {
        id: topLayout
        x: 10
        y: 10
        height: icon.height
        width: parent.width
        spacing: 10

        Image {
            id: icon
            width: 50
            height: 50
            source: "icons/software-application.png"
        }

        Column {
            width: background.width - icon.width - 20
            height: icon.height
            spacing: 5

            Text {
                text: item.name
                font.bold: true
                font.pointSize: 16
            }

            Text {
                text: qsTr("Details")
                font.bold: true
                font.pointSize: 9
                opacity: item.detailsOpacity
            }

            Text {
                text: item.description
                wrapMode: Text.WordWrap
                width: parent.width
                font.pointSize: 9
                opacity: item.detailsOpacity
            }
        }
    }

    Item {
        id: details
        x: 10
        width: parent.width - 20

        anchors {
            top: topLayout.bottom
            topMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
        }
        opacity: item.detailsOpacity
        Text {
            id: moreInfoTitle
            anchors.top: parent.top
            text: qsTr("Further information")
            font.pointSize: 9
            font.bold: true
        }

        Flickable {
            id: flick
            width: parent.width
            anchors {
                top: moreInfoTitle.bottom
                bottom: parent.bottom
            }
            contentHeight: infoText.height
            clip: true

            ColumnLayout {
                Text {
                    id: infoText
                    text: item.info
                    wrapMode: Text.WordWrap
                    width: details.width
                }
                Text {
                    id: amountText
                    text: "Amount: " + item.amount
                    wrapMode: Text.WordWrap
                    width: details.width
                }
                Text {
                    id: factorText
                    text: "Factor: " + item.factor
                    wrapMode: Text.WordWrap
                    width: details.width
                }
            }
        }

        Image {
            anchors {
                right: flick.right
                top: flick.top
            }
            source: "icons/moreUp.png"
            opacity: flick.atYBeginning ? 0 : 1
        }

        Image {
            anchors {
                right: flick.right
                bottom: flick.bottom
            }

            source: "icons/moreDown.png"
            opacity: flick.atYEnd ? 0 : 1
        }
    }

    Button {
        y: 10
        anchors {
            right: background.right
            rightMargin: 10
        }
        opacity: item.detailsOpacity
        text: qsTr("Close")

        onClicked: item.state = ''
    }

    states: State {
        name: "Details"

        PropertyChanges {
            background.color: "white"
            icon {
                // Make picture bigger
                width: 130
                height: 130
            }
            item {
                // Make details visible
                detailsOpacity: 1
                x: 0

                // Fill the entire list area with the detailed view
                height: listView.height
            }
        }

        // Move the list so that this item is at the top.
        PropertyChanges {
            item.ListView.view.contentY: item.y
            explicit: true
        }

        // Disallow flicking while we're in detailed view
        PropertyChanges {
            item.ListView.view.interactive: false
        }
    }

    transitions: Transition {
        // Make the state changes smooth
        ParallelAnimation {
            ColorAnimation {
                property: "color"
                duration: 500
            }
            NumberAnimation {
                duration: 300
                properties: "detailsOpacity,x,contentY,height,width"
            }
        }
    }
}