import QtQuick 2.6
import QtQuick.Controls 2.3

import trinity.matrix 1.0

Popup {
    id: profilePopup

    width: 500
    height: 256

    x: parent.width / 2 - width / 2
    y: parent.height / 2 - height / 2

    modal: true

    property var member


    RoundedImage {
        id: profileAvatar

        width: 64
        height: 64

        source: member.avatarURL ? member.avatarURL : "placeholder.png"
    }

    Text {
        id: profileNameLabel

        anchors.verticalCenter: profileAvatar.verticalCenter
        anchors.left: profileAvatar.right
        anchors.leftMargin: 15

        text: member.displayName

        font.pointSize: 22

        color: myPalette.text
    }

    Text {
        id: profileIdLabel

        anchors.verticalCenter: profileNameLabel.verticalCenter
        anchors.left: profileNameLabel.right
        anchors.leftMargin: 10

        text: member.id

        color: myPalette.dark
    }

    Text {
        id: roleText

        anchors.top: profileIdLabel.bottom
        anchors.topMargin: 5
        anchors.left: profileAvatar.right
        anchors.leftMargin: 15

        text: "Member Role Placeholder"

        color: myPalette.dark
    }

    Button {
        id: directMessageButton

        anchors.verticalCenter: profileAvatar.verticalCenter
        anchors.right: hamburgerButton.left
        anchors.rightMargin: 10

        text: "Direct message"
    }

    Button {
        id: hamburgerButton

        anchors.verticalCenter: profileAvatar.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 15

        text: "..."
    }

    TabBar {
        width: parent.width

        anchors.top: profileAvatar.bottom
        anchors.topMargin: 15

        id: profileTabs

        TabButton {
            text: "Security"
        }

        TabButton {
            text: "Sessions"
        }
    }

    SwipeView {
        interactive: false

        height: parent.height - profileNameLabel.height - profileTabs.height
        width: parent.width

        anchors.top: profileTabs.bottom

        currentIndex: profileTabs.currentIndex

        Item {
            id: sessionsTab
        }
    }
}