const audio = await Service.import("audio")
const battery = await Service.import("battery")
const mpris = await Service.import("mpris")

import Bluetooth from "./bluetooth.js"
import WifiIndicator from "./wifi.js"
import { Players } from "./media.js"

export function Volume() {
    const icons = {
        101: "high",
        67: "high",
        34: "medium",
        1: "low",
        0: "muted",
    }

    function getIcon() {
        const icon = audio.speaker.is_muted ? 0 : [101, 67, 34, 1, 0].find(
            threshold => threshold <= audio.speaker.volume * 100)

        return `audio-volume-${icons[icon]}-symbolic`
    }


    return Widget.EventBox({
        tooltip_text: '',
        setup: (self) => self.hook(audio.speaker, () => {
            self.tooltip_text = `Volume: ${(100 * audio.speaker.volume).toFixed(0)}%`
        }),
        child: Widget.Icon({
            class_name: "volume",
            icon: Utils.watch(getIcon(), audio.speaker, getIcon),
        })
    })

}

// const slider = Widget.Slider({
//     hexpand: true,
//     draw_value: false,
//     inverted: true,
//     on_change: ({ value }) => audio.speaker.volume = value,
//     setup: (self) => self.hook(audio.speaker, () => {
//         self.value = audio.speaker.volume || 0
//     }),
// })


export function BatteryLabel() {
    const value = battery.bind("percent").as(p => p > 0 ? p / 100 : 0)
    const icon = battery.bind("percent").as(p => 
	    `battery-${p > 90 ? "full" : p > 70 ? "good" : p > 50 ? "medium" : p > 30 ? "low" : p > 10 ? "caution" : "empty"}-symbolic`)

    return Widget.Box({
        class_name: "battery",
        visible: battery.bind("available"),
        child: Widget.EventBox({
            child: Widget.Icon({ icon }), 
            tooltip_text: value.as(p => `Battery: ${(p * 100).toFixed(0)}%`)
        }),
    })
}

function Panel() {
  return Widget.Box({
	  height_request: 200,
	  css: 'background: black;',
  })
}

export function SettingsWindow(monitor = 0) {
    return Widget.Window({
        monitor,
        name: `Settings-${monitor}`,
        anchor: ["top", "bottom", "right"],
        margins: [50, 0, 10, 0],
        width_request: 400,
        exclusivity: "ignore",
        layer: "top",
        class_name: "SettingsWindow",
        child: Widget.Box({
            class_name: "settings_window",
            child: Widget.Scrollable({
                vscroll: "always",
                hscroll: "never",
                hexpand: true,
                vexpand: true,
                margin: 20,
                child: Widget.Box({
                    vertical: true,
                    children: [
			Panel(),
                        Players()
                    ]
                }),
            }),
        }),
    })
}


export default function Settings() {


    return Widget.Button({
        tooltip_text: 'Settings',
        attribute: false,
        margin_right: 8,
        child: Widget.Box({
            spacing: 8,
            children: [
                Bluetooth(),
                WifiIndicator(),
                BatteryLabel(),
                Volume(),
            ],
        }),
        on_clicked: (self) => {
            self.attribute = !self.attribute
            
            App.toggleWindow(App.windows[1].name)
        },
    })
}