import QtQuick 2.12
import QtQuick.Controls 1.4


Column {
    property var title
    property var provider
    property var repeaterModel
    property bool elemSelected
    property int xIndex
    Item {
        width: 10
        height: 40
    }
    Text {
        text: title
        font.pointSize: 30
        color: "white"
    }
    Item {
        width: 10
        height: 40
    }
    Row {
        Repeater {
            property var provider: modelData
            model: repeaterModel
            Row{
            Item {
                height: 10
                width: 80
            }
            Column {
                id: showColumn
                property var show: provider.getShow(modelData)
                Item {
                    property int childHeight: 300
                    property int childWidth: 300 * 0.68
                    property int borderWidth: 7
                    property int borderRadius: 7
                    height: 300 + (borderWidth * 2)
                    width: (300 * 0.68) + (borderWidth * 2)
                    state: (elemSelected && (index == xIndex)) ? "selected" : "deselected"
                    Image {
                        height: parent.childHeight
                        width: parent.childWidth
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        source: showColumn.show.poster
                        mipmap: true
                    }
                    Rectangle {
                        id: rect
                        color: "transparent"
                        border.color: "orange"
                        width: parent.width
                        height: parent.height
                        border.width: parent.borderWidth
                        radius: parent.borderRadius
                    }
                    states: [
                        State {
                            name: "deselected"
                            PropertyChanges {
                                target: rect
                                border.width: 0
                            }
                        },
                        State {
                            name: "selected"
                            PropertyChanges {
                                target: rect
                                border.width: parent.borderWidth
                            }
                        }
                    ]
                    transitions: [
                        Transition {
                            NumberAnimation {
                                properties: "border.width"
                                duration: 50
                                easing.type: Easing.Linear
                            }
                        }
                    ]

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