const mpris = await Service.import("mpris")
const players = mpris.bind("players")

const FALLBACK_ICON = "audio-x-generic-symbolic"
const PLAY_ICON = "media-playback-start-symbolic"
const PAUSE_ICON = "media-playback-pause-symbolic"
const PREV_ICON = "media-skip-backward-symbolic"
const NEXT_ICON = "media-skip-forward-symbolic"

/** @param {number} length */
function lengthStr(length) {
    const min = Math.floor(length / 60)
    const sec = Math.floor(length % 60)
    const sec0 = sec < 10 ? "0" : ""
    return `${min}:${sec0}${sec}`
}

/** @param {import('types/service/mpris').MprisPlayer} player */
function Player(player) {
    return Widget.Label({ label: `${player.name}: ${player.cover_path}` })
    // return Widget.Overlay({
    //     child: Widget.Box({
    //         class_name: "img",
    //         vpack: "start",
    //         css: player.bind("cover_path").transform(p => `background-image: url('${p}');`),
    //     }),
    //     overlays: [
    //         Widget.Label({ label: player.name }),
    //     ],
    // })
}

function MediaContent() {
    return Widget.Box({
        children: players.as(p => p.map(Player)),
    })
}

export function Media(monitor = 0) {
    return Widget.Window({
        monitor,
        visible: false,
        exclusivity: "normal",
        className: "media",
        margins: [10, 10, 0, 10],
        name: `media${monitor}`,
        anchor: ["left", "top"],
        child: MediaContent(),
    })
}