import type { Output, Track } from "@applets/core/types.d.ts";
import { applet, reactive } from "../../theme.ts";

////////////////////////////////////////////
// 🎨 Styles
////////////////////////////////////////////
import "@styles/themes/pilot/index.css";

////////////////////////////////////////////
// 🗂️ Applets
////////////////////////////////////////////
import type * as AudioEngine from "@applets/engine/audio/types.d.ts";
import type * as QueueEngine from "@applets/engine/queue/types.d.ts";

import type * as AudioUI from "@applets/themes/pilot/ui/audio/types.d.ts";

const _configurator = {
  output: await applet("../../configurator/output"),
};

const engine = {
  audio: await applet<AudioEngine.State>("../../engine/audio"),
  queue: await applet<QueueEngine.State>("../../engine/queue"),
};

const input = {
  nativeFs: await applet("../../input/native-fs"),
};

const _orchestrator = {
  input: await applet<Output>("../../orchestrator/input-cache"),
  output: await applet<Output>("../../orchestrator/output-management"),
  queue: await applet("../../orchestrator/single-queue"),
};

const ui = {
  audio: await applet<AudioUI.State>("ui/audio", { setHeight: true }),
};

////////////////////////////////////////////
// ⚙️ [Connections → Engines]
// 🔉 AUDIO
////////////////////////////////////////////

// NOTE:
// These could probably be optimised, but it works.

reactive(
  engine.audio,
  (data) => data.items[engine.queue.data.now?.id ?? Infinity]?.isPlaying ?? false,
  (isPlaying) => ui.audio.sendAction("modifyIsPlaying", isPlaying),
);

reactive(
  engine.audio,
  (data) => data.items[engine.queue.data.now?.id ?? Infinity]?.progress ?? 0,
  (progress: number) => ui.audio.sendAction("modifyProgress", progress),
);

////////////////////////////////////////////
// 🌅 [Connections → UI]
// 🔉 AUDIO
////////////////////////////////////////////

reactive(
  ui.audio,
  (data) => data.isPlaying,
  (isPlaying) => {
    const trackId = engine.queue.data.now?.id;
    const volume = 0.5; // TODO

    // Automatically start playing something if nothing is playing yet.
    if (!trackId) {
      if (isPlaying) engine.queue.sendAction("shift");
      return;
    }

    // Otherwise just control the audio
    if (isPlaying) {
      engine.audio.sendAction("play", { trackId, volume });
    } else {
      engine.audio.sendAction("pause", { trackId });
    }
  },
);

reactive(
  ui.audio,
  (data: AudioUI.State) => data.seekPosition,
  (seekPosition) => {
    if (seekPosition !== undefined && engine.queue.data.now?.id) {
      engine.audio.sendAction("seek", {
        percentage: seekPosition,
        trackId: engine.queue.data.now.id,
      });
    }
  },
);