using Gtk 4.0;
using Adw 1;

template $UiWindow: Adw.ApplicationWindow {
  title: _("audrey");
  default-width: 800;
  default-height: 600;

  content: Box {
    orientation: vertical;

    Adw.OverlaySplitView {
      vexpand: true;

      [sidebar]
      Adw.NavigationPage {
        width-request: 100;
        title: _("audrey");

        Adw.ToolbarView {
          [top]
          Adw.HeaderBar {
            [end]
            Button {
              icon-name: "applications-system";
              clicked => $show_setup_dialog ();
            }
          }

          content: Box {
            orientation: vertical;

            ListBox sidebar {
              styles [
                "navigation-sidebar",
              ]

              row-activated => $on_sidebar_row_activated();

              ListBoxRow sidebar_play_queue {
                Label {
                  xalign: 0;
                  label: _("Play queue");
                }
              }
            }

            Separator {}

            ListBox {
              selection-mode: none;

              styles [
                "navigation-sidebar",
              ]

              Adw.ButtonRow shuffle_all_tracks {
                title: _("Shuffle all tracks");
                start-icon-name: "media-playlist-shuffle";
                sensitive: false;
              }
            }

            Separator {
              styles [
                "spacer",
              ]
              vexpand: true;
            }

            Picture {
              paintable: bind template.playing_cover_art;
            }
          };
        }
      }

      [content]
      Stack stack {
        StackPage {
          name: "play_queue";
          title: _("Play queue");

          child: $UiPlayQueue play_queue {
            store: bind template.play_queue_store;
          };
        }
      }
    }

    [bottom]
    CenterBox {
      styles [
        "toolbar",
      ]

      [start]
      Box {
        orientation: vertical;
        valign: center;

        Label {
          styles [ "heading" ]
          xalign: 0;
          halign: start;
          label: bind template.song as <$Song>.title;
          ellipsize: end;
        }

        Label {
          styles [ "caption" ]
          xalign: 0;
          label: bind template.song as <$Song>.artist;
          ellipsize: end;
        }

        Label {
          styles [ "caption" ]
          xalign: 0;
          label: bind template.song as <$Song>.album;
          ellipsize: end;
        }
      }

      [center]
      Box {
        orientation: vertical;
        halign: center;
        hexpand: true;

        CenterBox {
          [start]
          Label play_position_label {
            styles [
              "caption",
              "numeric",
            ]

            label: bind $format_timestamp (template.position) as <string>;
          }

          [center]
          Scale play_position {
            name: "seek-scale";
            orientation: horizontal;
            width-request: 400;
            sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

            adjustment: Adjustment {
              lower: 0;
              value: bind template.position;
              upper: bind template.playbin as <$Playbin>.duration;
            };

            change-value => $on_play_position_seek ();
          }

          [end]
          Label play_duration {
            styles [
              "caption",
              "numeric",
            ]

            label: bind $format_timestamp (template.playbin as <$Playbin>.duration) as <string>;
          }
        }

        Box {
          halign: center;
          orientation: horizontal;

          Button {
            icon-name: "media-skip-backward";
            valign: center;
            sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

            clicked => $on_skip_backward_clicked ();
          }

          Button {
            icon-name: "media-seek-backward";
            valign: center;
            sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

            clicked => $seek_backward ();
          }

          Button {
            icon-name: bind $play_pause_icon_name (template.playbin as <$Playbin>.state as <$PlaybinState>) as <string>;
            valign: center;
            sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

            clicked => $on_play_pause_clicked ();
          }

          Button {
            icon-name: "media-seek-forward";
            valign: center;
            sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

            clicked => $seek_forward ();
          }

          Button {
            icon-name: "media-skip-forward";
            valign: center;
            sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

            clicked => $on_skip_forward_clicked ();
          }
        }
      }

      [end]
      Box {
        Button {
          icon-name: "non-starred";
          valign: center;
        }

        Button {
          icon-name: bind $mute_button_icon_name (template.mute) as <string>;
          valign: center;

          clicked => $on_mute_toggle ();
        }

        Scale {
          name: "volume-scale";
          orientation: horizontal;
          width-request: 130;

          adjustment: Adjustment {
            lower: 0.0;
            value: bind template.volume bidirectional;
            upper: 1.0;
          };
        }
      }
    }
  };
}