<template>
  <div class="px-3">
    <div class="field is-horizontal">
      <div class="field-body columns">
        <div class="field column">
          <label class="label">Username</label>
          <div class="control">
            <p>{{ props.row.username }}</p>
          </div>
        </div>
        <div class="field column">
          <label class="label">{{ isVietnamese ? "Loại tài khoản" : "Account type" }}</label>
          <div class="control">
            <p>{{ isVietnamese ? props.row.type__name : props.row.type__en }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="field is-horizontal mt-4">
      <div class="field-body columns">
        <div class="field column">
          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}</label>
          <div class="control">
            <p>{{ props.row.fullname }}</p>
          </div>
        </div>
        <div class="field column">
          <label class="label">Email</label>
          <div class="control">
            <p>{{ props.row.email }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-5 pt-2">
      <button :class="`button is-primary has-text-white `" @click="showConfirm">
        {{ isVietnamese ? "Đặt lại mật khẩu" : "Reset password" }}
      </button>
    </div>
    <Modal v-bind="showModal" v-if="showModal.show" @close="showModal.show = false"> </Modal>
  </div>
</template>
<script setup>
const { $store, $id, $insertapi, $getdata, $getpath, $updateapi, $dialog } = useNuxtApp();
const emit = defineEmits(["close"]);
var props = defineProps({
  row: Object,
});

const showModal = ref({
  show: false,
});

const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
let pass = $id().toLocaleLowerCase();

async function handlerResetPassword() {
  let user = await $getdata("user", undefined, { filter: { id: props.row.id } }, true);
  const response = await fetch(`${$getpath()}password/${pass}/`);
  let hash = await response.json();
  user.password = hash;
  let rs1 = await $updateapi("user", user, null, false);
  if (rs1 === "error") {
    $dialog("Có lỗi xảy ra. Hãy thử lại một lần nữa", "Lỗi", "Error");
  } else {
    showModal.value.show = false;
    let content = `<p>Xin chào ${props.row.fullname}, </p>`;
    content += "<p>Mật khẩu tài khoản của bạn trên hệ thống đã được đặt lại thành công.</p>";
    content += "<p>Tài khoản đăng nhập của bạn:</p>";
    content += `<p>Username: ${props.row.username}</p>`;
    content += `<p>Password: ${pass}</p>`;
    content += `<p>Đội ngũ Utopia.</p>`;
    let info = {
      subject: "Thông báo đặt lại mật khẩu tài khoản đăng nhập Utopia",
      to: props.row.email,
      sender: 1,
      content: content,
    };
    let rs = await $insertapi("sendemail", info, null, false);
    emit("close");
  }
}

function showConfirm() {
  showModal.value = {
    show: true,
    title: !isVietnamese ? "Confirm password reset" : "Xác nhận đặt lại mật khẩu",
    height: "300px",
    width: "800px",
    component: "dialog/Confirm",
    vbind: {
      content: `Bạn có muốn đặt lại mật khẩu cho tài khoản ${props.row.username?.toUpperCase()} này không?`,
      duration: 10,
    },
    onConfirm: async () => {
      handlerResetPassword();
    },
  };
}
</script>
