using Gtk 4.0;
using Adw 1;

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

  Adw.ToolbarView {
    top-bar-style: raised;
    bottom-bar-style: raised;

    [top]
    Adw.HeaderBar {
      [start]
      Button {
        icon-name: "media-playlist-shuffle";
        sensitive: bind template.can_click_shuffle_all;
        clicked => $shuffle_all() swapped;
      }

      title-widget: Adw.ViewSwitcher {
        stack: stack;
        policy: wide;
      };

      [end]
      Button {
        icon-name: "applications-system";
        clicked => $show_setup_dialog() swapped;
      }
    }

    content: Adw.ViewStack stack {
      vexpand: true;

      Adw.ViewStackPage {
        icon-name: "media-optical-cd";
        title: _("Albums");

        child: Adw.NavigationView {
          Adw.NavigationPage {
            title: _("Albums");
            vexpand: true;

            child: Adw.ToolbarView {
              [top]
              CenterBox {
                styles [
                  "toolbar"
                ]

                [start]
                DropDown {
                  selected: 0;

                  model: StringList {
                    strings [
                      _("Random"),
                      _("Recently added"),
                      _("Most played"),
                      _("Recently played"),
                      _("Starred"),
                      _("Name"),
                      _("Artist"),
                    ]
                  };
                }

                [center]
                SearchEntry {
                  placeholder-text: _("Search...");
                }

                [end]
                Box {
                  Button {
                    icon-name: "view-refresh";
                  }
                }
              }

              ScrolledWindow {
                vexpand: true;

                GridView {
                  styles [ "albums" ]
                  single-click-activate: true;

                  model: NoSelection {
                    model: bind template.albums-model;
                  };

                  factory: BuilderListItemFactory {
                    template ListItem {
                      child: Box {
                        orientation: vertical;
                        margin-bottom: 6;

                        Image {
                          icon-name: "media-optical-cd";
                          pixel-size: 160;
                          halign: center;
                          hexpand: false;

                          styles [
                            "frame"
                          ]
                        }

                        Label {
                          label: bind template.item as <$AudreyModelAlbum>.name;
                          ellipsize: end;

                          styles [
                            "heading"
                          ]
                        }

                        Label {
                          label: bind template.item as <$AudreyModelAlbum>.artist;
                          ellipsize: end;

                          styles [
                            "caption"
                          ]
                        }
                      };
                    }
                  };
                }
              }
            };
          }
        };
      }

      Adw.ViewStackPage {
        icon-name: "media-playback-start";
        title: _("Play queue");
        name: "play-queue";

        child: Box {
          name: "play-queue-page";
          homogeneous: true;

          Adw.Clamp {
            halign: center;
            margin-top: 24;
            margin-bottom: 24;
            margin-start: 24;
            margin-end: 24;

            Picture {
              valign: center;

              styles [
                "frame"
              ]

              halign: center;
              paintable: bind template.playing_cover_art;
            }
          }

          $AudreyUiPlayQueue play_queue {
            hexpand: true;
            halign: fill;
            margin-top: 48;
            margin-bottom: 48;
            margin-start: 24;
            margin-end: 24;

            styles [
              "frame"
            ]

            model: bind template.playlist_model;
            playlist-pos: bind template.playlist-pos;
            // playbin: bind template.playbin;
          }
        };
      }
    };

    [bottom]
    $AudreyUiPlaybar playbar {
      song: bind template.song;
      playing-cover-art: bind template.playing-cover-art;
      show-cover-art: bind $show_playbar_cover_art(stack.visible-child-name) as <bool>;
      volume: bind template.volume bidirectional;
      mute: bind template.mute bidirectional;
      pause: bind template.pause bidirectional;
      position: bind template.time-pos;
      duration: bind template.duration;
      idle-active: bind template.idle-active;
      playlist-count: bind template.playlist-count;
    }
  }
}