import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

import utils 1.0
import shared.panels 1.0

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
//TODO improve this!
import AppLayouts.Chat.stores 1.0

Popup {
    id: root

    property var store

    signal stickerSelected(string hashId, string packId, string url)

    QtObject {
        id: d

        // FIXME: move me to store
        readonly property int installedPacksCount: root.store.stickersModuleInst.numInstalledStickerPacks
        readonly property var recentStickers: root.store.stickersModuleInst.recent
        readonly property var stickerPackList: store.stickersModuleInst.stickerPacks
        readonly property bool stickerPacksLoaded: store.stickersModuleInst.packsLoaded
        readonly property bool stickerPacksLoadFailed: store.stickersModuleInst.packsLoadFailed
        readonly property bool stickerPacksLoading: !stickerPacksLoaded && !stickerPacksLoadFailed

        function loadStickers() {
            store.stickersModuleInst.loadStickers()
        }
    }

    enabled: !!d.recentStickers && !!d.stickerPackList
    width: 360
    height: 440
    modal: false
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
    background: Rectangle {
        radius: Style.current.radius
        color: Style.current.background
        border.color: Style.current.border
        layer.enabled: true
        layer.effect: DropShadow {
            verticalOffset: 3
            radius: 8
            samples: 15
            fast: true
            cached: true
            color: "#22000000"
        }
    }

    onClosed: {
        stickerMarket.visible = false
        footerContent.visible = true
        stickersContainer.visible = true
    }

    Connections {
        target: mainModule
        function onOnlineStatusChanged() {
            root.close()
        }
    }

    contentItem: ColumnLayout {
        anchors.fill: parent
        spacing: 0

        StatusStickerMarket {
            id: stickerMarket
            visible: false
            Layout.fillWidth: true
            Layout.fillHeight: true
            store: root.store
            stickerPacks: d.stickerPackList
            packId: stickerPackListView.selectedPackId
            onInstallClicked: {
                stickersModule.install(packId)
                stickerGrid.model = stickers
                stickerPackListView.itemAt(index).clicked()
            }
            onUninstallClicked: {
                stickersModule.uninstall(packId)
                stickerGrid.model = d.recentStickers
                btnHistory.clicked(null)
            }
            onBackClicked: {
                stickerMarket.visible = false
                footerContent.visible = true
                stickersContainer.visible = true
            }

            Loader {
                id: marketLoader
                anchors.centerIn: parent
                active: d.stickerPacksLoading
                sourceComponent: loadingImageComponent
            }

            ColumnLayout {
                id: failedToLoadStickersInfo

                anchors.centerIn: parent
                visible: d.stickerPacksLoadFailed

                StatusBaseText {
                    text: qsTr("Failed to load stickers")
                    color: Theme.palette.dangerColor1
                }

                StatusButton {
                    objectName: "stickersPopupRetryButton"
                    Layout.alignment: Qt.AlignHCenter
                    text: qsTr("Try again")

                    onClicked: d.loadStickers()
                }
            }
        }

        Item {
            id: stickersContainer
            Layout.fillWidth: true
            Layout.leftMargin: 4
            Layout.rightMargin: 4
            Layout.topMargin: 4
            Layout.bottomMargin: 0
            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
            Layout.preferredHeight: 400 - 4

            Item {
                id: noStickerPacks
                anchors.fill: parent
                visible: d.installedPacksCount == 0 || stickersModule.recent.rowCount() === 0

                Image {
                    id: imgNoStickers
                    visible: lblNoStickersYet.visible || lblNoRecentStickers.visible
                    width: 56
                    height: 56
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    anchors.topMargin: 134
                    source: Style.svg("stickers_sad_icon")
                }

                Item {
                    id: noStickersContainer
                    width: parent.width
                    height: 22
                    anchors.top: imgNoStickers.bottom
                    anchors.topMargin: 8

                    StyledText {
                        id: lblNoStickersYet
                        visible: d.installedPacksCount === 0
                        anchors.fill: parent
                        font.pixelSize: 15
                        text: qsTr("You don't have any stickers yet")
                        lineHeight: 22
                        horizontalAlignment: Text.AlignHCenter
                    }

                    StyledText {
                        id: lblNoRecentStickers
                        visible: stickerPackListView.selectedPackId === -1 && stickersModule.recent.rowCount() === 0 && !lblNoStickersYet.visible
                        anchors.fill: parent
                        font.pixelSize: 15
                        text: qsTr("Recently used stickers will appear here")
                        lineHeight: 22
                        horizontalAlignment: Text.AlignHCenter
                    }
                }

                StatusButton {
                    objectName: "stickersPopupGetStickersButton"
                    visible: lblNoStickersYet.visible
                    text: qsTr("Get Stickers")
                    anchors.top: noStickersContainer.bottom
                    anchors.topMargin: Style.current.padding
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: {
                        stickersContainer.visible = false
                        stickerMarket.visible = true
                        footerContent.visible = false
                    }
                }
            }
            StatusStickerList {
                id: stickerGrid
                objectName: "statusStickerPopupStickerGrid"
                model: d.recentStickers
                packId: stickerPackListView.selectedPackId
                onStickerClicked: {
                    root.stickerSelected(hash, packId, url)
                    root.close()
                }
            }

            Component {
                id: loadingImageComponent
                StatusLoadingIndicator {
                    width: 50
                    height: 50
                }
            }

            Loader {
                id: loadingGrid
                active: d.stickerPacksLoading
                sourceComponent: loadingImageComponent
                anchors.centerIn: parent
            }
        }

        Row {
            id: footerContent
            Layout.fillWidth: true
            leftPadding: Style.current.padding / 2
            rightPadding: Style.current.padding / 2
            spacing: Style.current.padding / 2

            StatusFlatRoundButton {
                id: btnAddStickerPack
                implicitHeight: 40
                implicitWidth: 24
                icon.name: "add"
                type: StatusFlatRoundButton.Type.Tertiary
                color: "transparent"
                state: d.stickerPacksLoading ? "default" : "pending"
                onClicked: {
                    stickersContainer.visible = false
                    stickerMarket.visible = true
                    footerContent.visible = false
                }
            }

            StatusTabBarIconButton {
                id: btnHistory
                icon.name: "time"
                highlighted: true
                onClicked: {
                    highlighted = true
                    stickerPackListView.selectedPackId = -1
                    stickerGrid.model = d.recentStickers
                }
            }

            StatusScrollView {
                id: installedStickersSV
                height: 40

                RowLayout {
                    id: stickersRowLayout
                    width: inputScrollView.availableWidth
                    spacing: Style.current.padding

                    Repeater {
                        id: stickerPackListView
                        property int selectedPackId: -1
                        model: d.stickerPackList
                        visible: d.stickerPacksLoaded

                        delegate: StatusStickerPackIconWithIndicator {
                            id: packIconWithIndicator
                            visible: installed
                            width: 24
                            height: 24
                            selected: stickerPackListView.selectedPackId === packId
                            source: thumbnail
                            Layout.preferredHeight: height
                            Layout.preferredWidth: width
                            onClicked: {
                                btnHistory.highlighted = false
                                stickerPackListView.selectedPackId = packId
                                stickerGrid.model = stickers
                            }
                        }
                    }
                    Repeater {
                        id: loadingStickerPackListView
                        model: d.stickerPacksLoading ? 7 : 0

                        delegate: Rectangle {
                            width: 24
                            height: 24
                            Layout.preferredHeight: height
                            Layout.preferredWidth: width
                            radius: width / 2
                            color: Style.current.backgroundHover
                        }
                    }
                    Item {
                        Layout.fillWidth: true
                    }
                }
            }
        }
    }
}