import { isBlank } from "@util/common_util_validate";
import { createButton, createInputField } from "@ui/ui_template_elements";
import { changePassword, updateUserProfile, type DashboardUser } from "./B01_Dashboard_Api_Fetch";
import { buildUserFields, L, runRequest } from "./B01_Dashboard_UI_Common";

const PASSWORD_MIN_LENGTH = 8;

export function buildProfileForm(user: DashboardUser): HTMLElement {
  const fields = buildUserFields(user);
  const grid = fields.grid;
  const save = createButton({
    label: L("B01_Dashboard_SaveProfile"),
    onClick: async function onB01_Profile_Save_Click() {
      if (!fields.validate()) return;
      await runRequest(() => updateUserProfile(fields.values()));
    },
  });
  const wrap = document.createElement("div");
  wrap.append(grid, save);
  return wrap;
}

export function buildSecurityForm(): HTMLElement {
  const currentPassword = createInputField({
    label: L("B01_Account_Field_CurrentPw"),
    type: "password",
    required: true,
  });
  const newPassword = createInputField({
    label: L("B01_Account_Field_NewPw"),
    type: "password",
    required: true,
  });
  const confirmPassword = createInputField({
    label: L("B01_Account_Field_ConfirmPw"),
    type: "password",
    required: true,
  });
  const grid = document.createElement("div");
  grid.className = "b01-dashboard__form-grid";
  grid.append(currentPassword.root, newPassword.root, confirmPassword.root);
  const save = createButton({
    label: L("B01_Account_Save_Password"),
    variant: "ghost",
    onClick: async function onB01_Password_Save_Click() {
      currentPassword.setError();
      newPassword.setError();
      confirmPassword.setError();

      const currentValue = currentPassword.input.value;
      const nextValue = newPassword.input.value;
      const confirmValue = confirmPassword.input.value;
      if (isBlank(currentValue) || isBlank(nextValue) || isBlank(confirmValue)) {
        currentPassword.setError(isBlank(currentValue) ? L("Common_Msg_RequiredField") : undefined);
        newPassword.setError(isBlank(nextValue) ? L("Common_Msg_RequiredField") : undefined);
        confirmPassword.setError(isBlank(confirmValue) ? L("Common_Msg_RequiredField") : undefined);
        return;
      }
      if (nextValue.length < PASSWORD_MIN_LENGTH) {
        newPassword.setError(L("B01_Account_Error_PwLength"));
        return;
      }
      if (nextValue !== confirmValue) {
        confirmPassword.setError(L("B01_Account_Error_PwMismatch"));
        return;
      }
      await runRequest(() =>
        changePassword({
          current_password: currentValue,
          new_password: nextValue,
          new_password_confirm: confirmValue,
          logout_all: false,
        }),
      );
      currentPassword.input.value = "";
      newPassword.input.value = "";
      confirmPassword.input.value = "";
    },
  });
  const wrap = document.createElement("div");
  wrap.append(grid, save);
  return wrap;
}