const audio = await Service.import("audio");
import { renderInputDevices } from "./InputDevices.js";
import { renderPlaybacks } from "./PlaybackDevices.js";

const availableDevices = () => {
  return Widget.Box({
    vertical: true,
    children: [
      Widget.Box({
        class_name: "menu-section-container playback",
        vertical: true,
        children: [
          Widget.Box({
            class_name: "menu-label-container playback",
            hpack: "fill",
            child: Widget.Label({
              class_name: "menu-label audio playback",
              hexpand: true,
              hpack: "start",
              label: "Playback Devices",
            }),
          }),
          Widget.Box({
            class_name: "menu-items-section playback",
            vertical: true,
            children: [
              Widget.Box({
                class_name: "menu-container playback",
                vertical: true,
                children: [
                  Widget.Box({
                    vertical: true,
                    children: audio
                      .bind("speakers")
                      .as((v) => renderPlaybacks(v)),
                  }),
                ],
              }),
            ],
          }),
        ],
      }),
      Widget.Box({
        class_name: "menu-section-container input",
        vertical: true,
        children: [
          Widget.Box({
            class_name: "menu-label-container playback",
            hpack: "fill",
            child: Widget.Label({
              class_name: "menu-label audio playback",
              hexpand: true,
              hpack: "start",
              label: "Input Devices",
            }),
          }),
          Widget.Box({
            class_name: "menu-items-section input",
            vertical: true,
            children: [
              Widget.Box({
                class_name: "menu-container input",
                vertical: true,
                children: [
                  Widget.Box({
                    vertical: true,
                    children: audio
                      .bind("microphones")
                      .as((v) => renderInputDevices(v)),
                  }),
                ],
              }),
            ],
          }),
        ],
      }),
    ],
  });
};

export { availableDevices };