using Gtk 4.0;
using Adw 1;

template $ExmDetailView: Adw.NavigationPage {
  Adw.ToolbarView {
    [top]
    Adw.HeaderBar header_bar {
      title-widget: Adw.WindowTitle title {};
    }

    content: Adw.BreakpointBin {
      width-request: 360;
      height-request: 294;

      Adw.Breakpoint {
        condition ("max-width: 400sp")

        setters {
          ext_info_bar.orientation: vertical;
          header_suffix.orientation: vertical;
          header_suffix.spacing: 12;
          ext_install.halign: start;
          comment_box.min-children-per-line: 1;
        }

        apply => $breakpoint_apply_cb() swapped;
        unapply => $breakpoint_unapply_cb() swapped;
      }

      Gtk.Stack stack {
        vexpand: true;

        Gtk.StackPage {
          name: "page_spinner";

          child: Gtk.Box {
            orientation: vertical;
            spacing: 24;
            valign: center;

            Adw.Spinner {
              focusable: true;
              halign: center;
              valign: center;
              height-request: 32;
              width-request: 32;

              accessibility {
                labelled-by: loading_details;
              }
            }

            Gtk.Label loading_details {
              styles [
                "title-1"
              ]

              label: _("Loading Details");
            }
          };
        }

        Gtk.StackPage {
          name: "page_error";

          child: Adw.StatusPage error_status {
            icon-name: "offline-symbolic";
            title: _("Connection Error");
            focusable: true;
          };
        }

        Gtk.StackPage {
          name: "page_empty";

          child: Adw.StatusPage {
            icon-name: "dialog-question-symbolic";
            title: _("An Error Occurred");
            description: _("No extension details available");
            focusable: true;
          };
        }

        Gtk.StackPage {
          name: "page_detail";

          child: Gtk.ScrolledWindow scroll_area {
            Adw.Clamp {
              maximum-size: 800;

              Gtk.Box {
                styles [
                  "detail"
                ]

                orientation: vertical;
                spacing: 24;

                Gtk.Box header {
                  orientation: horizontal;
                  spacing: 24;

                  Gtk.Image ext_icon {
                    focusable: true;
                    halign: center;
                    valign: center;
                    pixel-size: 64;
                  }

                  Gtk.Box header_suffix {
                    orientation: horizontal;
                    spacing: 24;

                    Gtk.Box {
                      orientation: vertical;
                      hexpand: true;
                      valign: center;

                      Gtk.Label ext_title {
                        styles [
                          "title-1"
                        ]

                        xalign: 0;
                        ellipsize: end;
                        selectable: true;

                        accessibility {
                          description: _("Name");
                        }
                      }

                      Gtk.Label ext_author {
                        styles [
                          "dim-label"
                        ]

                        xalign: 0;
                        ellipsize: end;
                        selectable: true;

                        accessibility {
                          description: _("Author");
                        }
                      }
                    }

                    $ExmInstallButton ext_install {
                      valign: center;
                      halign: center;
                    }
                  }
                }

                Gtk.Overlay ext_screenshot_container {
                  [overlay]
                  Gtk.Button ext_screenshot_popout_button {
                    styles [
                      "osd",
                      "circular"
                    ]

                    icon-name: "pip-out-symbolic";
                    halign: end;
                    valign: end;
                    margin-top: 8;
                    margin-bottom: 8;
                    margin-start: 8;
                    margin-end: 8;
                    tooltip-text: _("Enlarge Image");
                    clicked => $screenshot_view_cb(template);
                  }

                  $ExmScreenshot ext_screenshot {
                    focusable: true;
                  }
                }

                Gtk.Box {
                  orientation: vertical;

                  Gtk.Label description {
                    styles [
                      "title-4",
                      "detail-heading"
                    ]

                    label: _("Description");
                    xalign: 0;
                  }

                  Gtk.Label ext_description {
                    styles [
                      "multiline"
                    ]

                    xalign: 0;
                    wrap: true;
                    wrap-mode: word_char;
                    selectable: true;

                    accessibility {
                      labelled-by: description;
                    }
                  }
                }

                $ExmInfoBar ext_info_bar {}

                Adw.PreferencesGroup {
                  title: _("Links");

                  Adw.ActionRow link_homepage {
                    [prefix]
                    Gtk.Image {
                      icon-name: "go-home-symbolic";
                    }

                    title: _("Homepage");
                    activatable: true;
                    action-name: "detail.open-homepage";

                    [suffix]
                    Gtk.Image {
                      styles [
                        "dim-label"
                      ]

                      icon-name: "external-link-symbolic";
                    }
                  }

                  Adw.ExpanderRow links_donations {
                    [prefix]
                    Gtk.Image {
                      icon-name: "donation-symbolic";
                    }

                    title: _("Donate");
                  }

                  Adw.ActionRow link_extensions {
                    [prefix]
                    Gtk.Image {
                      icon-name: "web-browser-symbolic";
                    }

                    title: _("View on Extensions");
                    activatable: true;
                    action-name: "detail.open-extensions";

                    [suffix]
                    Gtk.Image {
                      styles [
                        "dim-label"
                      ]

                      icon-name: "external-link-symbolic";
                    }
                  }
                }

                Gtk.Box {
                  orientation: vertical;

                  Gtk.Label {
                    styles [
                      "title-4",
                      "detail-heading"
                    ]

                    label: _("User Reviews");
                    xalign: 0;
                    selectable: true;
                  }

                  // TODO: Abstract into common class
                  Gtk.Stack comment_stack {
                    vexpand: true;

                    Gtk.StackPage {
                      name: "page_spinner";

                      child: Gtk.Image {
                        icon-name: "content-loading-symbolic";
                        icon-size: large;
                        valign: center;
                      };
                    }

                    Gtk.StackPage {
                      name: "page_error";

                      child: Adw.StatusPage {
                        title: _("An Error Occurred");
                        icon-name: "dialog-question-symbolic";
                      };
                    }

                    Gtk.StackPage {
                      name: "page_empty";

                      child: Gtk.Label {
                        label: _("No comments yet");
                        valign: start;
                        xalign: 0;
                        selectable: true;
                      };
                    }

                    Gtk.StackPage {
                      name: "page_comments";

                      child: Gtk.Box {
                        orientation: vertical;

                        Gtk.FlowBox comment_box {
                          min-children-per-line: 2;
                          max-children-per-line: 2;
                          homogeneous: true;
                          selection-mode: none;
                          row-spacing: 12;
                          column-spacing: 12;
                        }

                        Gtk.Button show_more_btn {
                          label: _("_Show All Reviews");
                          halign: center;
                          margin-top: 10;
                          use-underline: true;
                        }
                      };
                    }
                  }
                }
              }
            }
          };
        }
      }
    };
  }
}
