import Quickshell
import Quickshell.Io
import Quickshell.Hyprland
import QtQuick
import qs.Services
import qs.Widgets as Widgets

Column {
    anchors {
        top: parent.top
        horizontalCenter: parent.horizontalCenter
        margins: 6
    }
    width: 300
    height: childrenRect.height + anchors.margins * 2
    spacing: 6
    Item {
        visible: Brightess.monitors[0]
        anchors {
            left: parent.left
            right: parent.right
            margins: 12
        }
        width: childrenRect.width
        height: children[1].height
        Image {
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
                verticalCenterOffset: 1
            }
            width: 24
            height: width
            sourceSize {width: width; height: height}
            source: Quickshell.iconPath("brightnesssettings")
        }
        Text {
            anchors {
                top: parent.top
                left: parent.children[0].right
                leftMargin: 6
            }
            font.pixelSize: 16
            color: "white"
            text: "Display brightness"
        }
    }
    Widgets.Slider { 
        visible: Brightness.monitors[0]
        anchors {
            left: parent.left
            right: parent.right
            margins: 12
        }
        height: 24
        value: Brightness.monitors[0].value / Brightness.monitors[0].max
        onMoved: {
            Brightness.monitors[0].set(Math.round(Brightness.monitors[0].max * position))
        }
    }
    component ToggleButton: Item {
        id: toggleButton
        anchors {
            left: parent.left
            right: parent.right
            margins: 12
        }
        height: children[0].height
        property bool active: false
        property var text
        Text {
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
            }
            height: 24
            font.pixelSize: 14
            color: "white"
            text: toggleButton.text
        }
        Rectangle {
            anchors {
                right: parent.right
                verticalCenter: parent.verticalCenter
                rightMargin: (24 - width)/2 + (36-24)/2
            }
            radius: height/2
            color: parent.active ? "white" : "#00ffffff"
            height: 10
            width: parent.active ? 36 : 24
            border.width: parent.active ? height/2 : 2
            border.color: "white"
            Behavior on width {NumberAnimation { duration: 150; easing.type: Easing.OutCubic }}
            Behavior on border.width {NumberAnimation { duration: 150; easing.type: Easing.OutCubic }}
        }
    }
    ToggleButton {
        id: sunsetToggle
        text: "Night Light"
        Process {
            running: true
            command: [ "pgrep", "-x", "sunset" ]
            onExited: (exitCode) => {if (!exitCode) sunsetToggle.active = true}
        }
        TapHandler {
            property var idleProc: Process {command: ["hyprsunset"]}
            property var idleKill: Process {command: ["pkill", "-x", "hyprsunset"]}
            onTapped: {
                parent.active = !parent.active
                if (parent.active)
                    idleProc.startDetached()
                else
                    idleKill.startDetached()
            }
        }
    }
    ToggleButton {
        id: idleToggle
        text: "Idle Timer"
        Process {
            running: true
            command: [ "pgrep", "-x", "hypridle" ]
            onExited: (exitCode) => {if (!exitCode) idleToggle.active = true}
        }
        TapHandler {
            property var idleProc: Process {command: ["hypridle"]}
            property var idleKill: Process {command: ["pkill", "-x", "hypridle"]}
            onTapped: {
                parent.active = !parent.active
                if (parent.active)
                    idleProc.startDetached()
                else
                    idleKill.startDetached()
            }
        }
    }
    ToggleButton {
        id: dpmsToggle
        text: "Display"
        active: true
        TapHandler {
            property var resetTimer: Timer {
                interval: 500
                running: false
                repeat: false
                onTriggered: dpmsToggle.active = true
            }
            onTapped: {
                dpmsToggle.active = false;
                Hyprland.dispatch("dpms off");
                resetTimer.start();
                root.close();
            }
        }
    }
}