using Gtk 4.0;
using Adw 1;

template $BzScreenshotPage: Adw.Bin {
  ShortcutController {
    Shortcut {
      trigger: "Left";
      action: "action(screenshot.previous)";
    }

    Shortcut {
      trigger: "Right";
      action: "action(screenshot.next)";
    }

    Shortcut {
      trigger: "<ctrl>plus|<ctrl>equal|<ctrl>KP_Add";
      action: "action(screenshot.zoom-in)";
    }

    Shortcut {
      trigger: "<ctrl>minus|<ctrl>KP_Subtract";
      action: "action(screenshot.zoom-out)";
    }

    Shortcut {
      trigger: "<ctrl>0|<ctrl>KP_0";
      action: "action(screenshot.zoom-reset)";
    }

    Shortcut {
      trigger: "<ctrl>c";
      action: "action(screenshot.copy)";
    }
  }

  child: Adw.BreakpointBin {
    width-request: 360;
    height-request: 100;

    Adw.Breakpoint {
      condition ("max-width: 700px")

      setters {
        mobile_caption_box.margin-bottom: 78;
      }
    }

    child: Adw.ToastOverlay toast_overlay {
      child: Adw.ToolbarView {
        top-bar-style: flat;
        extend-content-to-top-edge: true;

        styles [
          "view-dark",
        ]

        [top]
        Adw.HeaderBar header_bar {
          styles [
            "flat",
            "header-osd",
          ]

          show-end-title-buttons: false;
          show-start-title-buttons: false;
          show-back-button: false;
          show-title: false;

          [start]
          Button back_button {
            icon-name: "go-previous-symbolic";
            tooltip-text: _("Back");
            clicked => $back_clicked() swapped;

            styles [
              "flat",
            ]
          }
        }

        content: Overlay {
          [overlay]
          Box {
            orientation: horizontal;
            halign: start;
            valign: end;
            margin-bottom: 18;
            margin-start: 18;
            spacing: 6;

            Box navigation_controls {
              orientation: horizontal;
              spacing: 6;
              visible: bind $has_multiple_screenshots(template.screenshots) as <bool>;

              styles [
                "osd-box",
              ]

              Button previous_button {
                icon-name: "go-previous-symbolic";
                tooltip-text: _("Previous Screenshot");
                action-name: "screenshot.previous";

                styles [
                  "flat",
                ]
              }

              Button next_button {
                icon-name: "go-next-symbolic";
                tooltip-text: _("Next Screenshot");
                action-name: "screenshot.next";

                styles [
                  "flat",
                ]
              }
            }

            Box {
              styles [
                "osd-box",
              ]

              Button copy_button {
                icon-name: "edit-copy-symbolic";
                tooltip-text: _("Copy Image");
                action-name: "screenshot.copy";

                styles [
                  "flat",
                ]
              }
            }
          }

          [overlay]
          Revealer {
            halign: center;
            valign: end;
            reveal-child: bind $is_valid_string(template.current-caption) as <bool>;
            transition-type: crossfade;
            can-target: false;

            child: Box mobile_caption_box {
              margin-bottom: 18;
              styles [
                "osd-box",
              ]

              Label {
                halign: center;
                hexpand: true;
                label: bind template.current-caption;
                height-request: 34;
                justify: center;
                max-width-chars: 30;
                wrap: true;
                margin-start: 8;
                margin-end: 8;
                wrap-mode: word_char;
                styles [
                  "heading"
                ]
              }
            };
          }

          [overlay]
          Box {
            orientation: horizontal;
            halign: end;
            valign: end;
            margin-bottom: 18;
            margin-end: 18;

            Box zoom_controls {
              orientation: horizontal;

              styles [
                "osd-box",
              ]

              Revealer {
                reveal-child: bind template.is-zoomed as <bool>;
                transition-type: slide_right;

                Button reset_zoom_button {
                  icon-name: "zoom-original-symbolic";
                  tooltip-text: _("Reset View");
                  action-name: "screenshot.zoom-reset";

                  styles [
                    "flat",
                  ]
                }
              }

              Button zoom_out_button {
                icon-name: "zoom-minus-symbolic";
                tooltip-text: _("Zoom Out");
                action-name: "screenshot.zoom-out";

                styles [
                  "flat",
                ]
              }

              Button zoom_in_button {
                icon-name: "zoom-plus-symbolic";
                tooltip-text: _("Zoom In");
                action-name: "screenshot.zoom-in";

                styles [
                  "flat",
                ]
              }
            }
          }

          child: Adw.Carousel carousel {
            can-focus: false;
            interactive: bind $invert_boolean(template.is-zoomed) as <bool>;
            allow-scroll-wheel: bind $invert_boolean(template.is-zoomed) as <bool>;
            allow-mouse-drag: bind $invert_boolean(template.is-zoomed) as <bool>;
            allow-long-swipes: false;
            notify::position => $on_carousel_position_changed();
          };
        };
      };
    };
  };
}