import QtQuick 2.12
import QtQuick.Controls 1.4

import Ikinuki.Client 1.0

import "./ContentView"

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

    property var maxElements: providers.length

    tabsVisible: false
    Repeater {
        model: providers
        Tab {
            Rectangle {
                color: "#22282A"
                Row {
                    Item {
                        height: 10
                        width: 40
                    }
                    Column {
                        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)=> {
        console.log(Qt.Key_Left);
        if (event.key == Qt.Key_Left) {
            if (xSelect == 0) {
                viewSelected = false;
                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--;
        }
    }
}