<script setup>
import { ref } from 'vue';

/** This pinia state contain activation status for the whole app*/
import { useGlobalstateStore } from "../../stores/globalstate";
const license = useGlobalstateStore();
const { __ } = wp.i18n;
/** Pinia state code ends **/
/** Importing vue toast notification lib */
import { useToast } from "vue-toastification";
/* ends */

/** This to hold key when user add that to the input area **/
const key = ref('');
const isloading = ref(false);
/** This to verify and activate Submitted API key*/
const verifyKey = () => {
  isloading.value = true;
  const data = new FormData();
  data.append('respacio_houzez_nonce', respacio_houzez_nonce);
  data.append('action', 'checkApiKey');
  data.append('key', key.value.trim());
  fetch(respacio_houzez_ajax_path, {
    method: 'POST',
    body: data
  })
    .then(res => res.json())
    .then(res => {

      if (res == true || res == 'true') {
        license.getActivatedStatus();
        isloading.value = false;
        const notification = useToast()
        notification( __('Your properties are now queued to import in Respacio CRM. When the process is complete you will receive an email confirmation.','respacio-houzez-import' ) );
        getApiKeyMasked();
      }
      if (res == false || res == 'false') {
        isloading.value = false;
        license.getActivatedStatus();

        const notification = useToast()
        notification.error(__('API key is not valid', 'respacio-houzez-import'), { timeout: 2000 });

      }

    })
    .catch(err => console.log(err))
}
/*ends*/

const removeKey = () => {
  const data = new FormData();
  data.append('respacio_houzez_nonce', respacio_houzez_nonce);
  data.append('action', 'removeKey');

  fetch(respacio_houzez_ajax_path, {
    method: 'POST',
    body: data
  })
    .then(res => res.json())
    .then(res => {
      if (res == true || res == 'true') {
        key.value = '';
        license.getActivatedStatus();
        const notification = useToast()
        notification(__('API key has been removed!', 'respacio-houzez-import'), { timeout: 2000 });
      }
    })
    .catch(err => console.log(err))
}

/** get masked key */
const getApiKeyMasked = () => {
  const data = new FormData();
  data.append('respacio_houzez_nonce', respacio_houzez_nonce);
  data.append('action', 'getApiKeyMasked');
  fetch(respacio_houzez_ajax_path, {
    method: 'POST',
    body: data
  })
    .then(res => res.json())
    .then(res => {
      if (res == false || res == 'false') {
        key.value = '';
        return;
      }
      key.value = res;
    })
    .catch(err => console.log(err));

}
if (license.isActivated == true) {
  getApiKeyMasked();
}

</script>
<template>
  <div class="rounded-xl bg-white mb-1 shadow p-4">
    <div class="flex flex-row items-center justify-between">
      <div class="flex flex-col  w-1/2">
        <div class="text-sm">{{ __('ChangeAPIkey', 'respacio-houzez-import') }}</div>
        <div class="text-xs">{{ __('Enter your website API key from Respacio CRM', 'respacio-houzez-import') }}</div>
      </div>
      <div class="flex flex-row w-1/2">
        <input class="w-full" type="text" v-model="key" />
        <button v-if="license.isActivated == false" class="bg-blue-700 text-white px-4 py1 rounded-full ml-2"
          @click="verifyKey">{{ __('Activate', 'respacio-houzez-import') }}</button>
        <button v-if="license.isActivated == true" class="bg-blue-700 text-white px-4 py1 rounded-full ml-2"
          @click="removeKey">{{ __('Remove', 'respacio-houzez-import') }}</button>
      </div>
    </div>
  </div>
  <div v-if="isloading">
    <div id="isloading"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"
        style="width: 100%;height: 100%;fill: rgb(217 23 23);">
        <circle r="80" cx="500" cy="90" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="500" cy="910" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="90" cy="500" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="910" cy="500" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="212" cy="212" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="788" cy="212" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="212" cy="788" style="fill: rgb(32, 32, 32);"></circle>
        <circle r="80" cx="788" cy="788" style="fill: rgb(32, 32, 32);"></circle>
      </svg></div>
    <p class="process">{{ __('Wait processing...', 'respacio-houzez-import') }}</p>
  </div>
</template>


<style>
#isloading {
  width: 4rem;
  height: 4rem;
  /* border: 5px solid #f3f3f3;
    border-top: 6px solid #9c41f2; */
  border-radius: 100%;
  margin: auto;
  /* visibility: hidden; */
  animation: spin 3s infinite linear;
}

#loading.display {
  visibility: visible;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.process {
  width: 150px;
  margin: 5px auto;
  font-size: large;
}
</style>