<template>
  <PageLayout title="Basic Settings" description="Set the Style of registration.">
    <template #button>
      <button class="btn-save" @click.prevent="onSave">{{saving ? 'Saving..' : 'Save'}}</button>
    </template>
    <div class="form-groups setting-content">
      <div class="login-config">
        <div class="form-group">
          <label>TITLE</label>
          <input v-model="loginSetting.title" type="text" maxlength="50">
        </div>
        <div class="form-group">
          <label>DESCRIPTION</label>
          <input v-model="loginSetting.description" type="text" maxlength="400">
        </div>
        <div class="form-group">
          <label>FULL NAME</label>
          <div>
            <span style="font-size: 13px">
              <input v-model="loginSetting.fullNameRequired" type="radio" name="name" :value="true">Required
            </span>
            <span style="margin-left: 30px;font-size: 13px">
              <input v-model="loginSetting.fullNameRequired" type="radio" name="name" :value="false">Optional
            </span>
          </div>
        </div>
        <div class="form-group">
          <label>INPUT PHONE</label>
          <div>
            <span style="font-size: 13px">
              <input v-model="loginSetting.phoneNumberRequired" type="radio" name="phone" :value="true">Required
            </span>
            <span style="margin-left: 30px;font-size: 13px">
              <input v-model="loginSetting.phoneNumberRequired" type="radio" name="phone" :value="false">Optional
            </span>
          </div>
        </div>
        <div class="form-group">
          <label>BUTTON TEXT</label>
          <input v-model="loginSetting.buttonText" type="text" maxlength="20">
        </div>
        <div class="form-group">
          <label>ADD THIRD PARTY REGISTRATION</label>
          <div class="third-party-row">
            <Checkbox v-model="loginSetting.facebookLogin" @update:model-value="checked=> loginSetting.facebookLogin=checked"></Checkbox>
            <span class="name">Facebook</span>
            <template v-if="loginSetting.facebookLogin">
              <span class="id-label">Client ID</span>
              <a href="https://developers.facebook.com/docs/development/create-an-app" target="_blank">How to get?</a>
              <input class="id-input" v-model="loginSetting.facebookClientId" type="text" maxlength="200" placeholder="Please input your Client ID">
            </template>
          </div>
          <div class="third-party-row">
            <Checkbox v-model="loginSetting.googleLogin" @update:model-value="checked=> loginSetting.googleLogin=checked"></Checkbox>
            <span class="name">Google</span>
            <template v-if="loginSetting.googleLogin">
              <span class="id-label">Client ID</span>
              <a href="https://developers.google.com/identity/sign-in/web/sign-in" target="_blank">How to get?</a>
              <input class="id-input" v-model="loginSetting.googleClientId" type="text" maxlength="200" placeholder="Please input your Client ID">
            </template>
          </div>
          <div class="form-group textarea mt30">
            <JsSetting v-model="loginSetting.submitJs" desc="The following code will be executed after a successful registration or login (including Facebook and Google)."/>
          </div>
        </div>
      </div>
      <div class="right-preview">
        <div class="title">Preview</div>
        <img class="preview-image" :src="previewImage" alt="">
        <div class="sign-title lofty-ellipsis">{{ loginSetting.title}}</div>
        <div class="sign-desc">{{loginSetting.description}}</div>
        <div class="sign-button">{{loginSetting.buttonText}}</div>
        <div v-show="loginSetting.fullNameRequired" class="full-name-required">*</div>
        <div v-show="loginSetting.phoneNumberRequired" class="phone-number-required">*</div>
        <div class="third-party-login">
          <img v-show="loginSetting.facebookLogin" :src="FacebookSvg" class="lofty_iconfont" alt="facebook"/>
          <img v-show="loginSetting.googleLogin" :src="GoogleSvg" class="lofty_iconfont" alt="google"/>
        </div>
      </div>
      <Loading :loading="loading"/>
    </div>
  </PageLayout>
</template>

<script setup>
import PageLayout from "@/admin/common/PageLayout.vue";
import Checkbox from "@/admin/common/components/checkBox.vue";
import Loading from '@/admin/ui/loading.vue';
import JsSetting from "@/admin/common/SubmitJs.vue";
import LoginImage from "@/static/login-setting-preview.png";
import FacebookSvg from "@/static/facebook.svg";
import GoogleSvg from "@/static/google.svg";
import http from "@/api/index.js";
import getDefault from './defaultSetting.js'
import { showToast } from "@/admin/ui/constant.js";
const previewImage = LoftyIdxUtils.static_url(LoginImage);
const loginSetting = reactive(getDefault())
getSettingData()
const saving = ref(false);
const loading = ref(true);
async function getSettingData() {
  const res = await http.get('/save-data/common-info');
  loading.value = false
  if(res.data.commonData) {
    const data = res.data.commonData.loginSetting || {};
    for(let key in data) {
      loginSetting[key] = data[key];
    }
  }
}
async function onSave() {
  if(loginSetting.facebookLogin && !loginSetting.facebookClientId) {
    showToast('Please input your facebook Client ID')
    return
  }
  if(loginSetting.googleLogin && !loginSetting.googleClientId) {
    showToast('Please input your google Client ID')
    return
  }
  saving.value = true
  const data = {
    loginSetting: loginSetting
  }
  const res = await http.post('/save-data/data/update', {data});
  saving.value = false
  if(res.data) {
    showToast("Saved Successfully");
  } else {
    showToast("Save failed. Please try again.", { duration: 3000, err: true });
  }
}
</script>
<style scoped lang="scss">
.setting-content {
  display: flex;
  gap: 20px;
  .login-config {
    flex: 1;
  }
  .right-preview {
    width: 360px;
    height: 500px;
    background-color: rgba(246, 247, 251, 1);
    position: relative;
    .title {
      margin-top: 20px;
      color: $gray-700;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }
    .sign-title {
      position: absolute;
      font-size: 17px;
      top: 75px;
      left: 75px;
      font-weight: 700;
      width: 220px;
      text-align: center;
    }
    .sign-desc {
      position: absolute;
      font-size: 10px;
      left: 66px;
      top: 100px;
      width: 240px;
      text-align: center;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
    .sign-button {
      position: absolute;
      text-align: center;
      width: 100%;
      color: #fff;
      font-size: 12px;
      top: 338px;
    }
    .full-name-required {
      position: absolute;
      color: #f40;
      top: 135px;
      left: 109px;
      font-size: 9px;
    }
    .phone-number-required {
      position: absolute;
      color: #f40;
      top: 262px;
      left: 92px;
      font-size: 9px;
    }
    .third-party-login {
      position: absolute;
      width: 100%;
      top: 387px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      .lofty_iconfont {
        width: 23px;
        height: 23px;
      }
    }
    .preview-image {
      height: 85%;
      position: absolute;
      top: 52%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.third-party-row {
  display: flex;
  align-items: center;
  height: 30px;
  .name {
    margin-left: 10px;
    margin-right: 25px;
    width: 50px;
  }
  a {
    cursor: pointer;
    color: $color-theme;
  }
  .id-label {
    color: $gray-600;
    margin-right: 5px;
    font-family: 'font-regular';
  }
  .id-input {
    margin-left: 10px;
    width: 300px;
    height: 30px;
    flex: 1;
    &::placeholder {
      font-family: 'font-regular';
    }
  }
}
</style>