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 string userColorId
    property string 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 int deviceDelegateWidth: 220
        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 {
            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: 8
            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: 31
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 17
            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.bottomMargin: 25
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 15
            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
            implicitWidth: d.deviceDelegateWidth
            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.fillWidth: true
            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.alignment: Qt.AlignHCenter
            Layout.topMargin: 25
            Layout.bottomMargin: 25
            implicitHeight: 1
            implicitWidth: d.deviceDelegateWidth
            color: Theme.palette.baseColor4
            opacity: listView.count ? 1 : 0
        }

        StatusListView {
            id: listView

            Layout.alignment: Qt.AlignHCenter
            Layout.fillHeight: true

            implicitWidth: contentWidth
            implicitHeight: contentHeight
            contentWidth: d.deviceDelegateWidth

            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
            }
        }
    }
}