import Quickshell // for PanelWindow
import QtQuick // for Text
import QtQuick.Shapes
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Io
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
import Quickshell.Services.Notifications

Item {

    implicitWidth: 700
    implicitHeight: 450

    required property real radius
    property bool hovered: false

    id: root

    visible: false

    property int selected: 0


    VFlyoutDown {

        visible: root.visible

        color: Pywal.special.background
        radius: root.radius

        item: main

        WrapperMouseArea {
            ClippingRectangle {
                //anchors.fill: parent
                color: Pywal.special.background
                id: main

                radius: root.radius
                implicitWidth: root.width
                implicitHeight: root.height

                Item {
                    implicitWidth: root.width - 4 * lay.spacing
                    implicitHeight: root.height - 4 * lay.spacing
                    x: 2 * lay.spacing
                    y: 2 * lay.spacing
                    RowLayout {
                        id: lay
                        spacing: 2
                        anchors.fill: parent

                        ColumnLayout {
                            id: tabs
                            Layout.alignment: Qt.AlignTop
                            Repeater {
                                id: rep

                                model: 9

                                WrapperMouseArea {
                                    ClippingRectangle {
                                        //Layout.alignment: Qt.AlignTop
                                        implicitWidth: 40
                                        implicitHeight: 40
                                        radius: root.radius
                                        color: index == selected ? Pywal.colors.color13 : Pywal.colors.color4
                                        //Launcher { anchors.centerIn: parent }
                                        Text { 
                                            font.pointSize: 14
                                            text: switch(index) {
                                                case 0:
                                                return " ";
                                                case 1:
                                                return "󰍹 ";
                                                case 2:
                                                return "󰤨 ";
                                                case 3:
                                                return "󰂯";
                                                case 4:
                                                return " ";
                                                case 5:
                                                return " ";
                                                case 6:
                                                return "󰌳 ";
                                                case 7:
                                                return " ";
                                                case 8:
                                                return "󰁹";
                                                default:
                                                return "";
                                            } 
                                            anchors.centerIn: parent
                                            color: Pywal.colors.color0
                                        }
                                    }
                                    onEntered: child.color = Qt.binding(() => index == selected ? Pywal.colors.color13 : Pywal.colors.color12)
                                    onExited: child.color = Qt.binding(() => index == selected ? Pywal.colors.color13 : Pywal.colors.color4)
                                    onClicked: {
                                        selected = index
                                        child.color = Qt.binding(() => index == selected ? Pywal.colors.color13 : Pywal.colors.color4)
                                    }
                                    hoverEnabled: true
                                }
                            }
                        }
                        ClippingRectangle {
                            id: content
                            Layout.alignment: Qt.AlignHCenter
                            implicitWidth: parent.width - tabs.width - 2 * parent.spacing - rTabs.width - 2 * parent.spacing
                            implicitHeight: parent.height
                            radius: root.radius
                            color: Pywal.colors.color1

                            NotificationServer {
                                id: nserver
                                persistenceSupported: true
                                imageSupported: true
                                actionsSupported: true
                                bodyImagesSupported: true
                                bodySupported: true
                                bodyHyperlinksSupported: true
                                inlineReplySupported: true
                                actionIconsSupported: true

                                onNotification: (n) => {
                                    n.tracked = !n.transient
                                }


                            }
                            Loader {
                                anchors.fill: parent

                                readonly property Component launcher: Launcher {}
                                readonly property Component notifs: Notifications { server: nserver }

                                readonly property Component bt: Bluetooth {}
                                readonly property Component vol: Volume {}

                                readonly property Component bat: PowerMode {}
                                readonly property Component mon: Launcher {}

                                readonly property Component net: Launcher {}
                                readonly property Component mus: Launcher {}

                                readonly property Component clk: Clock {}
                                readonly property Component wal: Launcher {}

                                sourceComponent: switch(selected) {
                                    case 0:
                                    return wal;
                                    case 1:
                                    return mon;
                                    case 2:
                                    return net;
                                    case 3:
                                    return bt;
                                    case 4:
                                    return vol;
                                    case 5:
                                    return notifs;
                                    case 6:
                                    return mus;
                                    case 7:
                                    return wal;
                                    case 8:
                                    return bat;
                                    default:
                                    return launcher;
                                }
                            }
                        }

                        ColumnLayout {
                            id: rTabs
                            Layout.alignment: Qt.AlignBottom
                            Repeater {
                                id: rRep

                                model: 9

                                WrapperMouseArea {
                                    ClippingRectangle {
                                        //Layout.alignment: Qt.AlignTop
                                        implicitWidth: 40
                                        implicitHeight: 40
                                        radius: root.radius
                                        property bool use: false
                                        color: use ? Pywal.colors.color13 : Pywal.colors.color4
                                        //Launcher { anchors.centerIn: parent }
                                        Text { 
                                            font.pointSize: 14
                                            text: switch(index) {
                                                case 0:
                                                return " ";
                                                case 1:
                                                return " ";
                                                case 2:
                                                return " ";
                                                case 3:
                                                return "";
                                                case 4:
                                                return " ";
                                                case 5:
                                                return " ";
                                                case 6:
                                                return "󰊗 ";
                                                case 7:
                                                return " ";
                                                case 8:
                                                return " ";
                                                default:
                                                return "";
                                            } 
                                            anchors.centerIn: parent
                                            color: Pywal.colors.color0
                                        }
                                    }
                                    onEntered: child.color = Qt.binding(() => child.use ? Pywal.colors.color13 : Pywal.colors.color12)
                                    onExited: child.color = Qt.binding(() => child.use ? Pywal.colors.color13 : Pywal.colors.color4)
                                    onClicked: {
                                        child.use = !child.use

                                        switch(index) {
                                            case 0:
                                            case 1:
                                            case 2:
                                            case 3:
                                            case 4:
                                            case 5:
                                            case 6:
                                            case 7:
                                            case 8:
                                            default:
                                                break;
                                        }
                                    }
                                    hoverEnabled: true
                                }
                            }
                        }

                    }
                }
            }

            hoverEnabled: true
            onEntered: hovered = true
            onExited: {
                root.visible = false
                hovered = false
            }
        }
    }
}