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

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 {
                    Row {
                        Item {
                            height: parent.height
                            width: 16
                        }
                        Column {
                            spacing: 20
                            Item {
                                height: 20
                                width: parent.width
                            }
                            Text {
                                text: elementColumn.children[ySelect].provider.getShow(xSelect).title
                                font.pointSize: 30
                                color: "#cdd7d9"
                            }
                            Text {
                                text: elementColumn.children[ySelect].provider.getShow(xSelect).year
                                font.pointSize: 15
                                color: "#99afb4"
                            }
                            Text {
                                text: elementColumn.children[ySelect].provider.getShow(xSelect).description
                                font.pointSize: 13
                                color: "#cdd7d9"
                                width: tabView.parent.width * 0.6
                                wrapMode: Text.WordWrap
                                maximumLineCount: 4
                                elide: Text.ElideRight
                            }
                        }
                    }
                    Item {
                        height: 40
                        width: parent.width
                    }
                    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;
    }
}