import { App } from "astal/gtk3";
import { bind } from "astal";
import { Astal, Gtk } from "astal/gtk3";
import Mpris from "gi://AstalMpris";

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

export default function MediaMenu() {
  const { TOP, RIGHT } = Astal.WindowAnchor;
  const mpris = Mpris.get_default();

  return (
    <window
      anchor={TOP | RIGHT}
      name="Mediamenu"
      className="Media"
      application={App}
      visible={false}
    >
      <box vertical>
        {bind(mpris, "players").as((ps) =>
          ps.map((psi) =>
            psi ? (
              <box className="MediaContent">
                <box>
                  <box
                    className="Cover"
                    valign={Gtk.Align.CENTER}
                    css={bind(psi, "coverArt").as(
                      (cover) => `background-image: url('${cover}');`,
                    )}
                  />
                  <box vertical>
                    <box className="title">
                      <label
                        truncate
                        hexpand
                        halign={Gtk.Align.START}
                        label={bind(psi, "metadata").as(() => `${psi.title}`)}
                      />
                      <icon
                        icon={bind(psi, "entry").as((e) =>
                          Astal.Icon.lookup_icon(e)
                            ? e
                            : "audio-x-generic-symbolic",
                        )}
                      />
                    </box>
                    <label
                      halign={Gtk.Align.START}
                      valign={Gtk.Align.START}
                      className="artist"
                      vexpand
                      wrap
                      label={bind(psi, "metadata").as(() => `${psi.artist}`)}
                    />
                    <slider
                      visible={bind(psi, "length").as((l) => l > 0)}
                      onDragged={({ value }) =>
                        (psi.position = value * psi.length)
                      }
                      value={bind(psi, "position").as((p) =>
                        psi.length > 0 ? p / psi.length : 0,
                      )}
                    />
                    <centerbox className="actions">
                      <label
                        hexpand
                        className="position"
                        halign={Gtk.Align.START}
                        visible={bind(psi, "length").as((l) => l > 0)}
                        label={bind(psi, "position").as(lengthStr)}
                      />
                      <box>
                        <button
                          onClicked={() => psi.previous()}
                          visible={bind(psi, "canGoPrevious")}
                        >
                          <icon icon="media-skip-backward-symbolic" />
                        </button>
                        <button
                          onClicked={() => psi.play_pause()}
                          visible={bind(psi, "canControl")}
                        >
                          <icon
                            icon={bind(psi, "playbackStatus").as((s) =>
                              s === Mpris.PlaybackStatus.PLAYING
                                ? "media-playback-pause-symbolic"
                                : "media-playback-start-symbolic",
                            )}
                          />
                        </button>
                        <button
                          onClicked={() => psi.next()}
                          visible={bind(psi, "canGoNext")}
                        >
                          <icon icon="media-skip-forward-symbolic" />
                        </button>
                      </box>
                      <label
                        className="length"
                        hexpand
                        halign={Gtk.AlignEND}
                        visible={bind(psi, "length").as((l) => l > 0)}
                        label={bind(psi, "length").as((l) =>
                          l > 0 ? lengthStr(l) : "0:00",
                        )}
                      />
                    </centerbox>
                  </box>
                </box>
              </box>
            ) : (
              <label label="Nothing Playing" />
            ),
          ),
        )}
      </box>
    </window>
  );
}