import { App, Astal, Gtk, Gdk } from "astal/gtk3";
import Mpris from "gi://AstalMpris";
import { bind } from "astal";
import {
  PowerMenu,
  Cpu,
  BatteryLevel,
  Ram,
  Storage,
  Workspaces,
  FocusedClient,
  Time,
  SysTray,
} from "./modules/export";
import { close_all_menus } from "./utils/windows";
import Media from "./Media";

export default function Bar(gdkmonitor: Gdk.Monitor) {
  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
  const mpris = Mpris.get_default();

  return (
    <>
      <window
        className="Bar"
        name="Bar"
        gdkmonitor={gdkmonitor}
        exclusivity={Astal.Exclusivity.EXCLUSIVE}
        anchor={TOP | LEFT | RIGHT}
        application={App}
      >
        <centerbox>
          <box hexpand halign={Gtk.Align.START} className="RoudedBlock">
            <button
              onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
              halign={Gtk.Align.START}
              className="Menubutton"
            >
              
            </button>
            <Cpu />
            <Ram />
            <Storage />
            {/*<FocusedClient />*/}
          </box>
          <box hexpand halign={Gtk.Align.CENTER} className="RoudedBlock">
            <Workspaces />
          </box>
          <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
            {bind(mpris, "players").as((ps) =>
              ps[0] ? (
                <button
                  onClicked={() => {
                    close_all_menus("Mediamenu");
                    App.toggle_window("Mediamenu");
                  }}
                  className="Menubutton"
                >
                  
                </button>
              ) : (
                <></>
              ),
            )}
            <SysTray />
            <BatteryLevel />
            <Time />
            <button
              onClicked={() => {
                close_all_menus("powermenu");
                App.toggle_window("powermenu");
              }}
              halign={Gtk.Align.START}
              className="Menubutton"
            >
              ⏻
            </button>
          </box>
        </centerbox>
      </window>
      <PowerMenu />
      <Media />
    </>
  );
}