import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.4
import QtQuick.Controls 2.15

import Ikinuki.Client 1.0

import "./ContentView"

StackLayout {
    id: tabView
    property var providers
    property bool viewSelected
    property int selectedElement
    state: viewSelected ? "selected" : "deselected"
    property int xSelect: 0
    property int ySelect: 0
    width: parent.width * viewSelected ? 0.95 : 0.8
    height: parent.height

    Repeater {
        model: providers
        Rectangle {
            color: "#22282A"
            Row {
                Item {
                    height: 10
                    width: 40
                }
                Column {
                    height: tabView.height
                    width: tabView.width - 40
                    ShowDetails {
                        z: 1.2
                        height: parent.height * 0.25
                        width: parent.width
                        title: elementColumn.children[ySelect].provider.getShow(xSelect).title
                        year: elementColumn.children[ySelect].provider.getShow(xSelect).year
                        description: elementColumn.children[ySelect].provider.getShow(xSelect).description
                    }
                    ScrollView {
                        z: 1.0
                        height: parent.height * 0.75
                        width: parent.width
                        contentWidth: 2000
                        contentHeight: 2000
                        ScrollBar.horizontal.position: xSelect * 0.135
                        ScrollBar.vertical.position: ySelect * 0.22
                        Behavior on ScrollBar.horizontal.position {
                            NumberAnimation {
                                duration: 200
                                easing.type: Easing.Linear
                            }
                        }
                        Behavior on ScrollBar.vertical.position {
                            NumberAnimation {
                                duration: 200
                                easing.type: Easing.Linear
                            }
                        }
                        Flickable{
                            clip: true
                            Column {
                                id: elementColumn
                                spacing: 20
                                Element {
                                    title: "In Progress"
                                    provider: modelData
                                    repeaterModel: modelData.inProgress
                                    elemSelected: viewSelected && (0 == ySelect)
                                    xIndex: xSelect
                                }
                                Element {
                                    title: "Recently Added"
                                    provider: modelData
                                    repeaterModel: modelData.recentlyAdded
                                    elemSelected: viewSelected && (1 == ySelect)
                                    xIndex: xSelect
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    states: [
        State {
            name: "deselected"
            PropertyChanges {
                target: tabView
                width: parent.width * 0.8
            }
        },
        State {
            name: "selected"
            PropertyChanges {
                target: tabView
                width: parent.width * 0.95
            }
        }
    ]
    transitions: [
        Transition {
            NumberAnimation {
                properties: "width"
                duration: 150
                easing.type: Easing.Linear
            }
        }
    ]

    Keys.onPressed: (event)=> {
        if (event.key == Qt.Key_Left) {
            if (xSelect == 0) {
                parent.selectedView = 0;
            } else {
                xSelect--;
            }
        } else if (event.key == Qt.Key_Right) {
            xSelect++;
        } else if (event.key == Qt.Key_Down) {
            ySelect++;
        } else if (event.key == Qt.Key_Up) {
            ySelect--;
        }
        event.accepted = true;
    }
}