text: import $ from "jquery";
  
  import * as channel from "./channel";
  import {page_params} from "./page_params";
  import * as settings_config from "./settings_config";
  import * as upload_widget from "./upload_widget";
  
  export function build_realm_logo_widget(upload_function, is_night) {
      let logo_section_id = "#realm-day-logo-upload-widget";
      let logo_source = page_params.realm_logo_source;
  
      if (is_night) {
          logo_section_id = "#realm-night-logo-upload-widget";
          logo_source = page_params.realm_night_logo_source;
      }
  
      const delete_button_elem = $(logo_section_id + " .image-delete-button");
      const file_input_elem = $(logo_section_id + " .image_file_input");
      const file_input_error_elem = $(logo_section_id + " .image_file_input_error");
      const upload_button_elem = $(logo_section_id + " .image_upload_button");
  
      const get_file_input = function () {
          return file_input_elem.expectOne();
      };
  
      if (!page_params.is_admin) {
          return undefined;
      }
  
      if (logo_source === "D") {
          delete_button_elem.hide();
      } else {
          delete_button_elem.show();
      }
  
      const data = {night: JSON.stringify(is_night)};
      delete_button_elem.on("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          channel.del({
              url: "/json/realm/logo",
              data,
          });
      });
  
      return upload_widget.build_direct_upload_widget(
          get_file_input,
          file_input_error_elem.expectOne(),
          upload_button_elem.expectOne(),
          upload_function,
          page_params.max_logo_file_size_mib,
      );
  }
  
  function change_logo_delete_button(logo_source, logo_delete_button, file_input) {
      if (logo_source === "U") {
          logo_delete_button.show();
      } else {
          logo_delete_button.hide();
          // Need to clear input because of a small edge case
          // where you try to upload the same image you just deleted.
          file_input.val("");
      }
  }
  
  export function rerender() {
      const file_input = $("#realm-day-logo-upload-widget .image_file_input");
      const night_file_input = $("#realm-night-logo-upload-widget .realm-logo-file-input");
      $("#realm-day-logo-upload-widget .image-block").attr("src", page_params.realm_logo_url);
  
      if (page_params.realm_night_logo_source === "D" && page_params.realm_logo_source !== "D") {
          // If no night mode logo is uploaded but a day mode one
          // is, use the day mode one; this handles the common case
          // of transparent background logos that look good on both
          // night and day themes.  See also similar code in admin.js.
  
          $("#realm-night-logo-upload-widget .image-block").attr("src", page_params.realm_logo_url);
      } else {
          $("#realm-night-logo-upload-widget .image-block").attr(
              "src",
              page_params.realm_night_logo_url,
          );
      }
  
      if (
          (page_params.color_scheme === settings_config.color_scheme_values.night.code &&
              page_params.realm_night_logo_source !== "D") ||
          (page_params.color_scheme === settings_config.color_scheme_values.automatic.code &&
              page_params.realm_night_logo_source !== "D" &&
              window.matchMedia &&
              window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
          $("#realm-logo").attr("src", page_params.realm_night_logo_url);
      } else {
          $("#realm-logo").attr("src", page_params.realm_logo_url);
      }
  
      change_logo_delete_button(
          page_params.realm_logo_source,
          $("#realm-day-logo-upload-widget .image-delete-button"),
          file_input,
      );
      change_logo_delete_button(
          page_params.realm_night_logo_source,
          $("#realm-night-logo-upload-widget .image-delete-button"),
          night_file_input,
      );
  }
  