text: import _ from "lodash";
  
  import render_settings_api_key_modal from "../templates/settings/api_key_modal.hbs";
  import render_settings_custom_user_profile_field from "../templates/settings/custom_user_profile_field.hbs";
  import render_settings_dev_env_email_access from "../templates/settings/dev_env_email_access.hbs";
  
  import * as avatar from "./avatar";
  import * as channel from "./channel";
  import * as common from "./common";
  import * as overlays from "./overlays";
  import * as people from "./people";
  import * as pill_typeahead from "./pill_typeahead";
  import * as popovers from "./popovers";
  import * as settings_bots from "./settings_bots";
  import * as settings_ui from "./settings_ui";
  import * as setup from "./setup";
  import * as ui_report from "./ui_report";
  import * as user_pill from "./user_pill";
  
  export function update_email(new_email) {
      const email_input = $("#email_value");
  
      if (email_input) {
          email_input.text(new_email);
      }
  }
  
  export function update_full_name(new_full_name) {
      const full_name_field = $("#full_name_value");
      if (full_name_field) {
          full_name_field.text(new_full_name);
      }
  
      // Arguably, this should work more like how the `update_email`
      // flow works, where we update the name in the modal on open,
      // rather than updating it here, but this works.
      const full_name_input = $(".full_name_change_container input[name='full_name']");
      if (full_name_input) {
          full_name_input.val(new_full_name);
      }
  }
  
  export function user_can_change_name() {
      if (page_params.is_admin) {
          return true;
      }
      if (page_params.realm_name_changes_disabled || page_params.server_name_changes_disabled) {
          return false;
      }
      return true;
  }
  
  export function user_can_change_avatar() {
      if (page_params.is_admin) {
          return true;
      }
      if (page_params.realm_avatar_changes_disabled || page_params.server_avatar_changes_disabled) {
          return false;
      }
      return true;
  }
  
  export function update_name_change_display() {
      if (!user_can_change_name()) {
          $("#full_name").prop("disabled", true);
          $(".change_name_tooltip").show();
      } else {
          $("#full_name").prop("disabled", false);
          $(".change_name_tooltip").hide();
      }
  }
  
  export function update_email_change_display() {
      if (page_params.realm_email_changes_disabled && !page_params.is_admin) {
          $("#change_email .button").prop("disabled", true);
          $(".change_email_tooltip").show();
      } else {
          $("#change_email .button").prop("disabled", false);
          $(".change_email_tooltip").hide();
      }
  }
  
  export function update_avatar_change_display() {
      if (!user_can_change_avatar()) {
          $("#user-avatar-upload-widget .image_upload_button").prop("disabled", true);
          $("#user-avatar-upload-widget .image-delete-button .button").prop("disabled", true);
      } else {
          $("#user-avatar-upload-widget .image_upload_button").prop("disabled", false);
          $("#user-avatar-upload-widget .image-delete-button .button").prop("disabled", false);
      }
  }
  
  function display_avatar_upload_complete() {
      $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"});
      $("#user-avatar-upload-widget .image-upload-text").show();
      $("#user-avatar-upload-widget .image-delete-button").show();
  }
  
  function display_avatar_upload_started() {
      $("#user-avatar-source").hide();
      $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "visible"});
      $("#user-avatar-upload-widget .image-upload-text").hide();
      $("#user-avatar-upload-widget .image-delete-button").hide();
  }
  
  function settings_change_error(message, xhr) {
      ui_report.error(message, xhr, $("#account-settings-status").expectOne());
  }
  
  function update_custom_profile_field(field, method) {
      let field_id;
      if (method === channel.del) {
          field_id = field;
      } else {
          field_id = field.id;
      }
  
      const spinner_element = $(
          `.custom_user_field[data-field-id="${CSS.escape(field_id)}"] .custom-field-status`,
      ).expectOne();
      settings_ui.do_settings_change(
          method,
          "/json/users/me/profile_data",
          {data: JSON.stringify([field])},
          spinner_element,
      );
  }
  
  function update_user_custom_profile_fields(fields, method) {
      if (method === undefined) {
          blueslip.error("Undefined method in update_user_custom_profile_fields");
      }
  
      for (const field of fields) {
          update_custom_profile_field(field, method);
      }
  }
  
  export function append_custom_profile_fields(element_id, user_id) {
      const person = people.get_by_user_id(user_id);
      if (person.is_bot) {
          return;
      }
      const all_custom_fields = page_params.custom_profile_fields;
      const all_field_types = page_params.custom_profile_field_types;
  
      const all_field_template_types = new Map([
          [all_field_types.LONG_TEXT.id, "text"],
          [all_field_types.SHORT_TEXT.id, "text"],
          [all_field_types.CHOICE.id, "choice"],
          [all_field_types.USER.id, "user"],
          [all_field_types.DATE.id, "date"],
          [all_field_types.EXTERNAL_ACCOUNT.id, "text"],
          [all_field_types.URL.id, "url"],
      ]);
  
      for (const field of all_custom_fields) {
          let field_value = people.get_custom_profile_data(user_id, field.id);
          const is_choice_field = field.type === all_field_types.CHOICE.id;
          const field_choices = [];
  
          if (field_value === undefined || field_value === null) {
              field_value = {value: "", rendered_value: ""};
          }
          if (is_choice_field) {
              const field_choice_dict = JSON.parse(field.field_data);
              for (const choice in field_choice_dict) {
                  if (choice) {
                      field_choices[field_choice_dict[choice].order] = {
                          value: choice,
                          text: field_choice_dict[choice].text,
                          selected: choice === field_value.value,
                      };
                  }
              }
          }
  
          const html = render_settings_custom_user_profile_field({
              field,
              field_type: all_field_template_types.get(field.type),
              field_value,
              is_long_text_field: field.type === all_field_types.LONG_TEXT.id,
              is_user_field: field.type === all_field_types.USER.id,
              is_date_field: field.type === all_field_types.DATE.id,
              is_choice_field,
              field_choices,
          });
          $(element_id).append(html);
      }
  }
  
  export function initialize_custom_date_type_fields(element_id) {
      $(element_id).find(".custom_user_field .datepicker").flatpickr({
          altInput: true,
          altFormat: "F j, Y",
          allowInput: true,
      });
  
      $(element_id)
          .find(".custom_user_field .datepicker")
          .on("mouseenter", function () {
              if ($(this).val().length <= 0) {
                  $(this).parent().find(".remove_date").hide();
              } else {
                  $(this).parent().find(".remove_date").show();
              }
          });
  
      $(element_id)
          .find(".custom_user_field .remove_date")
          .on("click", function () {
              $(this).parent().find(".custom_user_field_value").val("");
          });
  }
  
  export function initialize_custom_user_type_fields(
      element_id,
      user_id,
      is_editable,
      set_handler_on_update,
  ) {
      const field_types = page_params.custom_profile_field_types;
      const user_pills = new Map();
  
      const person = people.get_by_user_id(user_id);
      if (person.is_bot) {
          return user_pills;
      }
  
      for (const field of page_params.custom_profile_fields) {
          let field_value_raw = people.get_custom_profile_data(user_id, field.id);
  
          if (field_value_raw) {
              field_value_raw = field_value_raw.value;
          }
  
          // If field is not editable and field value is null, we don't expect
          // pill container for that field and proceed further
          if (field.type === field_types.USER.id && (field_value_raw || is_editable)) {
              const pill_container = $(element_id)
                  .find(`.custom_user_field[data-field-id="${CSS.escape(field.id)}"] .pill-container`)
                  .expectOne();
              const pills = user_pill.create_pills(pill_container);
  
              function update_custom_user_field() {
                  const fields = [];
                  const user_ids = user_pill.get_user_ids(pills);
                  if (user_ids.length < 1) {
                      fields.push(field.id);
                      update_user_custom_profile_fields(fields, channel.del);
                  } else {
                      fields.push({id: field.id, value: user_ids});
                      update_user_custom_profile_fields(fields, channel.patch);
                  }
              }
  
              if (field_value_raw) {
                  const field_value = JSON.parse(field_value_raw);
                  if (field_value) {
                      for (const pill_user_id of field_value) {
                          const user = people.get_by_user_id(pill_user_id);
                          user_pill.append_user(user, pills);
                      }
                  }
              }
  
              if (is_editable) {
                  const input = pill_container.children(".input");
                  if (set_handler_on_update) {
                      const opts = {update_func: update_custom_user_field};
                      pill_typeahead.set_up(input, pills, opts);
                      pills.onPillRemove(() => {
                          update_custom_user_field();
                      });
                  } else {
                      pill_typeahead.set_up(input, pills, {});
                  }
              }
              user_pills.set(field.id, pills);
          }
      }
  
      return user_pills;
  }
  
  export function add_custom_profile_fields_to_settings() {
      if (!overlays.settings_open()) {
          return;
      }
  
      const element_id = "#account-settings .custom-profile-fields-form";
      $(element_id).html("");
      if (page_params.custom_profile_fields.length > 0) {
          $("#account-settings #custom-field-header").show();
      } else {
          $("#account-settings #custom-field-header").hide();
      }
  
      append_custom_profile_fields(element_id, people.my_current_user_id());
      initialize_custom_user_type_fields(element_id, people.my_current_user_id(), true, true);
      initialize_custom_date_type_fields(element_id);
  }
  
  export function set_up() {
      // Add custom profile fields elements to user account settings.
      add_custom_profile_fields_to_settings();
      $("#account-settings-status").hide();
  
      const setup_api_key_modal = _.once(() => {
          function request_api_key(data) {
              channel.post({
                  url: "/json/fetch_api_key",
                  data,
                  success(data) {
                      $("#get_api_key_password").val("");
                      $("#api_key_value").text(data.api_key);
                      // The display property on the error bar is set to important
                      // so instead of making display: none !important we just
                      // remove it.
                      $("#api_key_status").remove();
                      $("#password_confirmation").hide();
                      $("#show_api_key").show();
                  },
                  error(xhr) {
                      ui_report.error(i18n.t("Error"), xhr, $("#api_key_status").expectOne());
                      $("#show_api_key").hide();
                      $("#api_key_modal").show();
                  },
              });
          }
  
          $(".account-settings-form").append(render_settings_api_key_modal());
          $("#api_key_value").text("");
          $("#show_api_key").hide();
  
          if (page_params.realm_password_auth_enabled === false) {
              // Skip the password prompt step, since the user doesn't have one.
              request_api_key({});
          } else {
              $("#get_api_key_button").on("click", (e) => {
                  const data = {};
                  e.preventDefault();
                  e.stopPropagation();
  
                  data.password = $("#get_api_key_password").val();
                  request_api_key(data);
              });
          }
  
          $("#show_api_key").on("click", "button.regenerate_api_key", (e) => {
              channel.post({
                  url: "/json/users/me/api_key/regenerate",
                  success(data) {
                      $("#api_key_value").text(data.api_key);
                  },
                  error(xhr) {
                      $("#user_api_key_error").text(JSON.parse(xhr.responseText).msg).show();
                  },
              });
              e.preventDefault();
              e.stopPropagation();
          });
  
          $("#download_zuliprc").on("click", function () {
              const bot_object = {
                  user_id: people.my_current_user_id(),
                  email: page_params.delivery_email,
                  api_key: $("#api_key_value").text(),
              };
              const data = settings_bots.generate_zuliprc_content(bot_object);
              $(this).attr("href", settings_bots.encode_zuliprc_as_uri(data));
          });
      });
  
      $("#api_key_button").on("click", (e) => {
          setup_api_key_modal();
          overlays.open_modal("#api_key_modal");
          e.preventDefault();
          e.stopPropagation();
      });
  
      function clear_password_change() {
          // Clear the password boxes so that passwords don't linger in the DOM
          // for an XSS attacker to find.
          $("#old_password, #new_password").val("");
          common.password_quality("", $("#pw_strength .bar"), $("#new_password"));
      }
  
      clear_password_change();
  
      $("#change_full_name").on("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          if (user_can_change_name()) {
              $("#change_full_name_modal").find("input[name='full_name']").val(page_params.full_name);
              overlays.open_modal("#change_full_name_modal");
          }
      });
  
      $("#change_password").on("click", async (e) => {
          e.preventDefault();
          e.stopPropagation();
          overlays.open_modal("#change_password_modal");
          $("#pw_change_controls").show();
          if (page_params.realm_password_auth_enabled !== false) {
              // zxcvbn.js is pretty big, and is only needed on password
              // change, so load it asynchronously.
              const {default: zxcvbn} = await import("zxcvbn");
              window.zxcvbn = zxcvbn;
              $("#pw_strength .bar").removeClass("fade");
          }
      });
  
      $("#change_password_modal")
          .find("[data-dismiss=modal]")
          .on("click", () => {
              clear_password_change();
          });
  
      // If the modal is closed using the 'close' button or the 'Cancel' button
      $(".modal")
          .find("[data-dismiss=modal]")
          .on("click", () => {
              // Enable mouse events for the background on closing modal
              $(".overlay.show").attr("style", null);
          });
  
      $("#change_password_button").on("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          const change_password_error = $("#change_password_modal")
              .find(".change_password_info")
              .expectOne();
  
          const data = {
              old_password: $("#old_password").val(),
              new_password: $("#new_password").val(),
              confirm_password: $("#confirm_password").val(),
          };
  
          const new_pw_field = $("#new_password");
          const new_pw = data.new_password;
          if (new_pw !== "") {
              const password_ok = common.password_quality(new_pw, undefined, new_pw_field);
              if (password_ok === undefined) {
                  // zxcvbn.js didn't load, for whatever reason.
                  settings_change_error(
                      "An internal error occurred; try reloading the page. " +
                          "Sorry for the trouble!",
                  );
                  return;
              } else if (!password_ok) {
                  settings_change_error(i18n.t("New password is too weak"));
                  return;
              }
          }
  
          setup.set_password_change_in_progress(true);
          const opts = {
              success_continuation() {
                  setup.set_password_change_in_progress(false);
                  overlays.close_modal("#change_password_modal");
              },
              error_continuation() {
                  setup.set_password_change_in_progress(false);
              },
              error_msg_element: change_password_error,
          };
          settings_ui.do_settings_change(
              channel.patch,
              "/json/settings",
              data,
              $("#account-settings-status").expectOne(),
              opts,
          );
          clear_password_change();
      });
  
      $("#new_password").on("input", () => {
          const field = $("#new_password");
          common.password_quality(field.val(), $("#pw_strength .bar"), field);
      });
  
      $("#change_full_name_button").on("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          const change_full_name_error = $("#change_full_name_modal")
              .find(".change_full_name_info")
              .expectOne();
          const data = {};
  
          data.full_name = $(".full_name_change_container").find("input[name='full_name']").val();
  
          const opts = {
              success_continuation() {
                  overlays.close_modal("#change_full_name_modal");
              },
              error_msg_element: change_full_name_error,
          };
          settings_ui.do_settings_change(
              channel.patch,
              "/json/settings",
              data,
              $("#account-settings-status").expectOne(),
              opts,
          );
      });
  
      $("#change_email_button").on("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          const change_email_error = $("#change_email_modal").find(".change_email_info").expectOne();
          const data = {};
          data.email = $(".email_change_container").find("input[name='email']").val();
  
          const opts = {
              success_continuation() {
                  if (page_params.development_environment) {
                      const email_msg = render_settings_dev_env_email_access();
                      ui_report.success(
                          email_msg,
                          $("#dev-account-settings-status").expectOne(),
                          4000,
                      );
                  }
                  overlays.close_modal("#change_email_modal");
              },
              error_msg_element: change_email_error,
              success_msg: i18n
                  .t("Check your email (%s) to confirm the new address.")
                  .replace("%s", data.email),
          };
          settings_ui.do_settings_change(
              channel.patch,
              "/json/settings",
              data,
              $("#account-settings-status").expectOne(),
              opts,
          );
      });
  
      $("#change_email").on("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          if (!page_params.realm_email_changes_disabled || page_params.is_admin) {
              overlays.open_modal("#change_email_modal");
              const email = $("#email_value").text().trim();
              $(".email_change_container").find("input[name='email']").val(email);
          }
      });
  
      $("#user_deactivate_account_button").on("click", (e) => {
          // This click event must not get propagated to parent container otherwise the modal
          // will not show up because of a call to `close_active_modal` in `settings.js`.
          e.preventDefault();
          e.stopPropagation();
          $("#deactivate_self_modal").modal("show");
      });
  
      $("#account-settings").on("click", ".custom_user_field .remove_date", (e) => {
          e.preventDefault();
          e.stopPropagation();
          const field = $(e.target).closest(".custom_user_field").expectOne();
          const field_id = Number.parseInt($(field).attr("data-field-id"), 10);
          update_user_custom_profile_fields([field_id], channel.del);
      });
  
      $("#account-settings").on("change", ".custom_user_field_value", function (e) {
          const fields = [];
          const value = $(this).val();
          const field_id = Number.parseInt(
              $(e.target).closest(".custom_user_field").attr("data-field-id"),
              10,
          );
          if (value) {
              fields.push({id: field_id, value});
              update_user_custom_profile_fields(fields, channel.patch);
          } else {
              fields.push(field_id);
              update_user_custom_profile_fields(fields, channel.del);
          }
      });
  
      $("#do_deactivate_self_button").on("click", () => {
          $("#do_deactivate_self_button .loader").css("display", "inline-block");
          $("#do_deactivate_self_button span").hide();
          $("#do_deactivate_self_button object").on("load", function () {
              const doc = this.getSVGDocument();
              const $svg = $(doc).find("svg");
              $svg.find("rect").css("fill", "#000");
          });
  
          setTimeout(() => {
              channel.del({
                  url: "/json/users/me",
                  success() {
                      $("#deactivate_self_modal").modal("hide");
                      window.location.href = "/login/";
                  },
                  error(xhr) {
                      const error_last_owner = i18n.t(
                          "Error: Cannot deactivate the only organization owner.",
                      );
                      const error_last_user = i18n.t(
                          'Error: Cannot deactivate the only user. You can deactivate the whole organization though in your <a target="_blank" href="/#organization/organization-profile">Organization profile settings</a>.',
                      );
                      let rendered_error_msg;
                      if (xhr.responseJSON.code === "CANNOT_DEACTIVATE_LAST_USER") {
                          if (xhr.responseJSON.is_last_owner) {
                              rendered_error_msg = error_last_owner;
                          } else {
                              rendered_error_msg = error_last_user;
                          }
                      }
                      $("#deactivate_self_modal").modal("hide");
                      $("#account-settings-status")
                          .addClass("alert-error")
                          .html(rendered_error_msg)
                          .show();
                  },
              });
          }, 5000);
      });
  
      $("#show_my_user_profile_modal").on("click", () => {
          overlays.close_overlay("settings");
          const user = people.get_by_user_id(people.my_current_user_id());
          setTimeout(() => {
              popovers.show_user_profile(user);
          }, 100);
  
          // If user opened the "preview profile" modal from user
          // settings, then closing preview profile modal should
          // send them back to the settings modal.
          $("body").one("hidden.bs.modal", "#user-profile-modal", (e) => {
              e.preventDefault();
              e.stopPropagation();
              popovers.hide_user_profile();
  
              setTimeout(() => {
                  if (!overlays.settings_open()) {
                      overlays.open_settings();
                  }
              }, 100);
          });
      });
  
      function upload_avatar(file_input) {
          const form_data = new FormData();
  
          form_data.append("csrfmiddlewaretoken", csrf_token);
          for (const [i, file] of Array.prototype.entries.call(file_input[0].files)) {
              form_data.append("file-" + i, file);
          }
          display_avatar_upload_started();
          channel.post({
              url: "/json/users/me/avatar",
              data: form_data,
              cache: false,
              processData: false,
              contentType: false,
              success() {
                  display_avatar_upload_complete();
                  $("#user-avatar-upload-widget .image_file_input_error").hide();
                  $("#user-avatar-source").hide();
                  // Rest of the work is done via the user_events -> avatar_url event we will get
              },
              error(xhr) {
                  display_avatar_upload_complete();
                  if (page_params.avatar_source === "G") {
                      $("#user-avatar-source").show();
                  }
                  const $error = $("#user-avatar-upload-widget .image_file_input_error");
                  $error.text(JSON.parse(xhr.responseText).msg);
                  $error.show();
              },
          });
      }
  
      avatar.build_user_avatar_widget(upload_avatar);
  
      if (page_params.realm_name_changes_disabled) {
          $(".name_change_container").hide();
      }
  }
  