<template>
  <PageLayout 
  title="Password Reset" 
  description="This is a default page that requires no configuration. When a user requests to reset their password, they will be redirected here to complete the process. The page allows users to securely set a new password and regain access to their account."
  >
    <template #button>
      <button :class="['btn-save', { disable: saving }]" @click.prevent="onSave">
        {{ saving ? "Saving.." : "Save" }}
      </button>
    </template>
    <div class="form-groups">
      <div class="form-group">
        <label>PAGE URL</label>
        <PageUrl
            v-model="pageConfig.uri"
            :page-config="pageConfig"
            initial-val="profile"
            :can-edit="false"
        />
      </div>
      <div class="form-group">
        <MetaTags class="form-group" ref="metaTags" v-model="pageConfig.metaTagHtml" isShortCode/>
      </div>
    </div>
    <Loading :loading="fetching"/>
  </PageLayout>
</template>


<script setup>
import PageLayout from "@/admin/common/PageLayout.vue";
import PageUrl from "@/admin/common/PageUrl.vue";
import MetaTags from "@/admin/common/MetaTags.vue";
import { useTemplateRef } from "vue";
import http from "@/api/index.js";
import {showToast} from "@/admin/ui/constant.js";
import Loading from "@/admin/ui/loading.vue";
const metaTagsRef = useTemplateRef('metaTags')
const pageConfig = {
  uri: 'pwreset',
  domain: window.location.host,
  metaTagHtml: ''
}
const saving = ref(false);
async function onSave() {
  saving.value = true
  const res = await http.post(`/wp-plugin/admin/common/page/setting/update`, {
    data: {
      type: 'pwreset',
      uri: 'pwreset',
      metaTag: metaTagsRef.value.getValueString(),
      metaTagHtml: pageConfig.metaTagHtml
    }
  });
  if(res.status.code === 0) {
    showToast('Saved Successfully')
  } else {
    showToast('Error save page:' + res.status.msg, {err: true})
  }
  saving.value = false
}
const fetching = ref(true)
getProfileConfig();
async function getProfileConfig() {
  const res = await http.get('/wp-plugin/admin/common/page/setting/pwreset')
  fetching.value = false
  if(res.status.code === 0) {
    pageConfig.metaTagHtml = res.data?.metaTagHtml || ''
  }
}
</script>
<style scoped lang="scss">
.form-groups {
  padding: 22px 20px 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  margin-bottom: 20px;
  input {
    width: max-content;
  }

  label {
    width: 100px;
    font-weight: 500;
    font-size: 11px;
    color: $gray-800;
  }
}
</style>