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 ySelect: 0
    width: parent.width * viewSelected ? 0.95 : 0.8
    height: parent.height

    Item {
        Item { // fake object to create notifying array
            id: rowSelector
            Item {
                property int xIndex: 0
            }
            Item {
                property int xIndex: 0
            }
        }
        Repeater {
            model: providers
            Rectangle {
                anchors.fill: parent
                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
                            show: elementColumn.children[ySelect].provider.getShow(elementColumn.children[ySelect].repeaterModel[elementColumn.children[ySelect].xIndex])
                        }
                        ScrollView {
                            z: 1.0
                            height: parent.height * 0.75
                            width: parent.width
                            contentWidth: 2000
                            contentHeight: 2000
                            ScrollBar.vertical.position: ySelect * 0.22
                            Behavior on ScrollBar.vertical.position {
                                NumberAnimation {
                                    duration: 200
                                    easing.type: Easing.Linear
                                }
                            }
                            Flickable{
                                clip: true
                                Column {
                                    id: elementColumn
                                    spacing: 20
                                    width: parent.width
                                    Element {
                                        title: "In Progress"
                                        provider: modelData
                                        repeaterModel: modelData.inProgress
                                        elemSelected: viewSelected && (0 == ySelect)
                                        xIndex: rowSelector.children[0].xIndex
                                    }
                                    Element {
                                        title: "Recently Added"
                                        provider: modelData
                                        repeaterModel: modelData.recentlyAdded
                                        elemSelected: viewSelected && (1 == ySelect)
                                        xIndex: rowSelector.children[1].xIndex
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    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 (rowSelector.children[ySelect].xIndex == 0) {
                ySelect = 0;
                parent.selectedView = 0;
                for (var i = 0; i < rowSelector.children.length; i++) {
                    rowSelector.children[i].xIndex = 0;
                }
            } else {
                rowSelector.children[ySelect].xIndex--;
            }
        } else if (event.key == Qt.Key_Right) {
            rowSelector.children[ySelect].xIndex++;
        } else if (event.key == Qt.Key_Down) {
            ySelect++;
        } else if (event.key == Qt.Key_Up) {
            ySelect--;
        }
        event.accepted = true;
    }
}