<template>
  <div class="flex flex-row image-box">
    <div class="flex flex-row w-full py-3">
      <div class="w-full pr-1.5 ">
        <h3 class="text-center text-lg  font-semibold" >{{ __('Available Image Formats', 'respacio-houzez-import') }}</h3>
        <draggable
          class="list-group"
          :list="list1"
          group="format"
          item-key="id"
        >
        <template #item="{ element, index }">
          <div class="list-group-item">
            {{ element.type }} -    {{ element.width }}  x {{ element.height }}
          </div>
        </template>
      </draggable>
      </div>      
    </div>

    <div class="flex flex-row w-full py-3">
      <div class="w-full pr-1.5 ">
        <h3 class="text-center text-lg  font-semibold" >{{ __('Selected Image formats', 'respacio-houzez-import') }}</h3>
      <draggable
        class="list-group"
        :list="list2"
        group="format"
        item-key="id"
      >
        <template #item="{ element, index }">
          <div class="list-group-item">
            {{ element.type }} -    {{ element.width }}  x {{ element.height }}
          </div>
        </template>
      </draggable>
      </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>
  </div>
      <!-- footer button area -->
      <div class="flex flex-row justify-end mt-3">
      <button @click="saveFormats" class="bg-blue-800 px-6 py-2 rounded text-white">{{ __('Save', 'respacio-houzez-import') }}</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import draggable from 'vuedraggable'
import { useToast } from 'vue-toastification';

const { __ } = wp.i18n;
const key = ref('');
const isloading = ref(false);
const list1 = ref([]);
const getImageFormats = () =>{
    isloading.value = true;
    const data = new FormData();
    data.append('action','get_image_formats');
    data.append('respacio_houzez_nonce',respacio_houzez_nonce);

    fetch(respacio_houzez_ajax_path,{
      method:'POST',
      body:data
    })
    .then(res => res.json())
    .then(res => { 
      if(res !== false){
        isloading.value = false;
        if(!res.data.list2){
          list1.value = res.data
          console.log(res.data.list1);
        }else{
          list1.value = res.data.list1
          list2.value = res.data.list2
        }
      }
    })
    .catch(err => console.log(err));
}

const list2 = ref([]);

onMounted(()=>{
  getImageFormats();

})

const saveFormats = () =>{

    const toast = useToast();
    const data = new FormData();
    data.append('action','save_image_formats');
    data.append('respacio_houzez_nonce',respacio_houzez_nonce);
    data.append('list1',JSON.stringify(list1.value));
    data.append('list2',JSON.stringify(list2.value));

    fetch(respacio_houzez_ajax_path,{
      method:'POST',
      body:data
    })
    .then(res => res.json())
    .then(res => { 
      if(res !== false){

        toast(__('Image Formats Have Been Saved', 'respacio-houzez-import') );
        console.log(res.data);
      }
    })
    .catch(err => console.log(err));

}

</script>

<style scoped>
.list-group {
  min-height: 200px;
  border:1px solid #ccc;
  padding:25px;
  margin-right: 20px;
  background-color: #eee;
}

.list-group-item {
  padding: 10px;
  margin-bottom: 5px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  cursor: grab;
}

.image-box{
    margin-top: -86px;
}
</style>
