import QtQuick 2.15
import QtQuick.Layouts 1.15

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1

import shared.controls 1.0
import shared.controls.chat 1.0
import utils 1.0

import SortFilterProxyModel 0.2

Item {
    id: root

    property var devicesModel
    property string userDisplayName
    property int userColorId
    property var userColorHash
    property string userPublicKey
    property string userImage
    property string installationId
    property string installationName
    property string installationDeviceType

    property int localPairingState: Constants.LocalPairingState.Idle
    property string localPairingError

    implicitWidth: layout.implicitWidth
    implicitHeight: layout.implicitHeight

    QtObject {
        id: d

        readonly property bool pairingFailed: root.localPairingState === Constants.LocalPairingState.Error
        readonly property bool pairingSuccess: root.localPairingState === Constants.LocalPairingState.Finished
        readonly property bool pairingInProgress: !d.pairingFailed && !d.pairingSuccess
    }

    ColumnLayout {
        id: layout

        anchors.fill: parent
        spacing: 0

        UserImage {
            Layout.alignment: Qt.AlignHCenter
            name: root.userDisplayName
            colorId: root.userColorId
            colorHash: root.userColorHash
            image: root.userImage
            interactive: false
            imageWidth: 80
            imageHeight: 80
            loading: name === ""
        }

        StatusBaseText {
            Layout.fillWidth: true
            Layout.topMargin: Theme.halfPadding
            horizontalAlignment: Text.AlignHCenter
            color: Theme.palette.directColor1
            font.weight: Font.Bold
            font.pixelSize: 22
            elide: Text.ElideRight
            wrapMode: Text.Wrap
            text: root.userDisplayName
        }

        StatusBaseText {
            Layout.fillWidth: true
            Layout.topMargin: Theme.xlPadding
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: Theme.secondaryAdditionalTextSize
            color: d.pairingFailed ? Theme.palette.dangerColor1 : Theme.palette.directColor1
            text: {
                if (d.pairingInProgress)
                    return qsTr("Device found!");
                if (d.pairingSuccess)
                    return qsTr("Device synced!");
                if (d.pairingFailed)
                    return qsTr("Device failed to sync");
                return "";
            }
        }

        StatusBaseText {
            Layout.fillWidth: true
            Layout.topMargin: 4
            Layout.bottomMargin: Theme.bigPadding
            horizontalAlignment: Text.AlignHCenter
            color: Theme.palette.baseColor1
            visible: !!text
            text: {
                if (d.pairingInProgress)
                    return qsTr("Syncing your profile and settings preferences");
                if (d.pairingSuccess)
                    return qsTr("Your devices are now in sync");
                return "";
            }
        }

        StatusSyncDeviceDelegate {
            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            visible: !d.pairingFailed
            subTitle: d.pairingInProgress ? qsTr("Syncing with device")
                                          : qsTr("Synced device")
            enabled: false
            loading: d.pairingInProgress
            loadingSubTitle: false
            deviceName: root.installationName
            deviceType: root.installationDeviceType
            isCurrentDevice: false
            showOnlineBadge: false
        }

        ErrorDetails {
            Layout.alignment: Qt.AlignHCenter
            Layout.leftMargin: 60
            Layout.rightMargin: 60
            Layout.preferredWidth: 360
            Layout.topMargin: 12
            visible: d.pairingFailed
            title: qsTr("Failed to sync devices")
            details: root.localPairingError
        }

        Rectangle {
            Layout.topMargin: Theme.bigPadding
            Layout.bottomMargin: Theme.bigPadding
            Layout.fillWidth: true
            Layout.preferredHeight: 1
            color: Theme.palette.baseColor4
            opacity: listView.count ? 1 : 0
        }

        StatusListView {
            id: listView

            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.preferredHeight: contentHeight

            spacing: 4
            clip: true

            model: SortFilterProxyModel {
                sourceModel: root.devicesModel
                filters: [
                    ValueFilter {
                        enabled: true
                        roleName: "installationId"
                        value: root.installationId
                        inverted: true
                    }
                ]
            }

            delegate: StatusSyncDeviceDelegate {
                width: ListView.view.width
                enabled: false
                deviceName: model.name
                deviceType: model.deviceType
                timestamp: model.timestamp
                isCurrentDevice: model.isCurrentDevice
            }
        }
    }
}