<script setup>
import { getLayerNames } from '@/components/viewer/utils/aps-viewer';

const store = useStore();
const { layersetting } = store;
const emit = defineEmits('close');
const { $insertapi, $patchapi, $snackbar } = useNuxtApp();
const radioSave = ref(layersetting ? "overwrite" : "new");
const name = ref(radioSave === 'new' ? '' : layersetting ? layersetting.name : '');
const errors = ref([]);

watch(radioSave, (val) => {
  name.value = val === 'new' ? '' : layersetting.name;
  errors.value = [];
});

function switchRadioSave(newVal) {
  if (newVal === 'overwrite' && !layersetting) 
    return;
  
  radioSave.value = newVal;
}

async function saveLayerSetting() {
  const layerNames = getLayerNames();
  const user = store.login.id;
  if (!name.value) {
    errors.value.push({ name: "name", msg: "Tên thiết lập không được bỏ trống" })
    return;
  }

  const payload = {
    user,
    name: name.value,
    detail: layerNames
  }

  if (radioSave.value === 'overwrite') {
    payload.id = layersetting.id;
  }

  const res = radioSave.value === 'new' ? await $insertapi('layersetting', payload) : await $patchapi('layersetting', payload);
  if (res === 'error') {
    $snackbar(isVietnamese.value ? `Có lỗi xảy ra khi ${radioSave.value === 'new' ? 'tạo' : 'cập nhật' } thiết lập` : `Error ${radioSave.value === 'new' ? 'creating' : 'updating' } layer setting`,
      "Lỗi",
      "Error"
    );
  } else {
    store.commit('layersetting', res);
    emit('close');
  }
}
</script>
<template>
  <div class="field">
    <label class="label fs-14">Chọn chế độ lưu</label>
    <div class="control">
      <button class="button is-white fs-14 px-2 py-1" @click="switchRadioSave('overwrite')" :disabled="layersetting === undefined">
        <span class="icon-text">
          <SvgIcon v-bind="{
            name: `radio-${radioSave === 'new' ? 'unchecked' : 'checked'}.svg`,
            type: 'gray',
            size: 22,
          }" />
          Ghi đè
        </span>
      </button>
      <button class="button is-white fs-14 px-2 py-1" @click="switchRadioSave('new')">
        <span class="icon-text">
          <SvgIcon v-bind="{ 
            name: `radio-${radioSave === 'new' ? 'checked' : 'unchecked'}.svg`,
            type: 'gray',
            size: 22 
          }" />
          Tạo mới
        </span>
      </button>
    </div>
  </div>
  <div class="field">
    <label class="label fs-14">Tên thiết lập</label>
    <div class="control">
      <input
        class="input"
        style="box-sizing: border-box;"
        type="text"
        placeholder="e.g. Đường, Mặt hồ"
        v-model="name"
        @keydown.enter="saveLayerSetting"
      />
    </div>
    <div class="help has-text-danger" v-if="errors.find((v) => v.name === 'name')">
      {{ errors.find((v) => v.name === "name").msg }}
    </div>
  </div>
  <div class="field">
    <p class="control">
      <button class="button is-primary" @click="saveLayerSetting()">Lưu lại</button>
    </p>
  </div>
</template>
<style>
</style>