import QtQuick 2.12
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.12

Column {
    property var show
    anchors.fill: parent
    Item {
        id: parentElem
        property int baseHeight: 300
        property int childHeight: baseHeight
        property int childWidth: baseHeight * 0.68
        property int childHeightExpanded: baseHeight + 50
        property int childWidthExpanded: (baseHeight + 50) * 0.68
        property int borderWidth: 3
        property int borderRadius: 1
        property int borderRectHeight: childHeight + (borderWidth * 2)
        property int borderRectWidth: childWidth + (borderWidth * 2)
        property int borderRectHeightExpanded: childHeightExpanded + (borderWidth * 2)
        property int borderRectWidthExpanded: childWidthExpanded + (borderWidth * 2)
        height: 300 + (borderWidth * 2)
        width: (300 * 0.68) + (borderWidth * 2)
        state: (elemSelected && (index == xIndex)) ? "selected" : "deselected"
        anchors.horizontalCenter: parent.horizontalCenter
        DropShadow {
            id: dropShadow
            anchors.fill: img
            verticalOffset: 15
            samples: 80
            opacity: 0.5
            color: "black"
            source: img
        }
        Rectangle {
            id: rect
            color: "transparent"
            border.color: "orange"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            radius: parent.borderRadius
        }
        Image {
            id: img
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            source: show.poster
            mipmap: true
        }
        states: [
            State {
                name: "deselected"
                PropertyChanges {
                    target: rect
                    border.width: 0
                    height: parent.borderRectHeight
                    width: parent.borderRectWidth
                }
                PropertyChanges {
                    target: dropShadow
                    visible: false
                }
                PropertyChanges {
                    target: img
                    width: parent.childWidth
                    height: parent.childHeight
                }
            },
            State {
                name: "selected"
                PropertyChanges {
                    target: rect
                    border.width: parent.borderWidth
                    height: parent.borderRectHeightExpanded
                    width: parent.borderRectWidthExpanded
                }
                PropertyChanges {
                    target: dropShadow
                    visible: true
                }
                PropertyChanges {
                    target: img
                    width: parent.childWidthExpanded
                    height: parent.childHeightExpanded
                }
            }
        ]
        transitions: [
            Transition {
                NumberAnimation {
                    properties: "border.width,width,height"
                    duration: 100
                    easing.type: Easing.Linear
                }
            }
        ]

    }
    //Item {width: 1; height: 15}
    //Text {
    //    text: show.title
    //    color: "white"
    //    font.pointSize: 14
    //    anchors.horizontalCenter: parent.horizontalCenter
    //}
    //Item {width: 1; height: 5}
    //Text {
    //    text: show.year
    //    color: "white"
    //    font.pointSize: 14
    //    anchors.horizontalCenter: parent.horizontalCenter
    //}
}