<script setup>
import Template1 from '@/lib/email/templates/Template1.vue';
import useSendHandoverEmail from './useSendHandoverEmail';

const props = defineProps({
  row: Object,
})

const { $getdata, $store } = useNuxtApp();
$store.commit('selectedProductsForHandoverEmail', [props.row.id]);
const handoverTemplates = ref([]);
const selectedHandoverTemplate = ref(null);
const filter = ref({ id: props.row.id, elpro__stage__gt: 0 });
const templateNameRef = computed(() => selectedHandoverTemplate.value?.name);

const allowSend = computed(() => {
  if (!templateNameRef.value) return false;
  if (templateNameRef.value === 'Biên bản bàn giao đất - Cá nhân') {
    // disallow submit if product doesn't have CN customer
    const allCn = props.row.prdbk__transaction__customer__type__code === 'CN' 
      && !props.row.prdbk__transaction__co_op;
    return allCn;
  }
  if (templateNameRef.value === 'Biên bản bàn giao đất - Tổ chức') {
    // disallow submit if product doesn't have TC customer
    const allTc = props.row.prdbk__transaction__customer__type__code === 'TC';
    return allTc;
  }
  if (templateNameRef.value === 'Biên bản bàn giao đất - Đồng sở hữu') {
    // disallow submit if product doesn't have coop customer
    const allDsh = Boolean(props.row.prdbk__transaction__co_op);
    return allDsh;
  }

  return true;
})

const handoverEmailTemplateNames = [
  'Mail Thông báo bàn giao đất',
  'Mail Thông báo tất toán',
  'Biên bản bàn giao đất - Cá nhân',
  'Biên bản bàn giao đất - Đồng sở hữu',
  'Biên bản bàn giao đất - Tổ chức',
]

onMounted(async () => {
  const templatesData = await $getdata('emailtemplate', undefined, { 
    filter: { name__in: handoverEmailTemplateNames }, 
    sort: 'name' 
  });
  handoverTemplates.value = templatesData;
});

const showmodal = ref();

function openConfirmModal() {
  showmodal.value = {
    component: 'dialog/Confirm',
    title: 'Xác nhận',
    width: '500px',
    height: 'auto',
    vbind: {
      content: `Bạn có đồng ý gửi ${$store.selectedProductsForHandoverEmail.length} ${templateNameRef.value} không?`,
    }
  }
}

const { contents, send, isSending } = useSendHandoverEmail(filter, templateNameRef);
</script>
<template>
  <div>
    <div class="field">
      <label class="label">
        <span class="icon-text">
          <span>Chọn mẫu email<b class="ml-1 has-text-danger">*</b></span>
        </span>
      </label>
      <div class="tags">
        <span 
          v-for="temp in handoverTemplates"
          :key="temp.id"
          :class="['tag is-hoverable fs-14', {'is-primary': temp.id === selectedHandoverTemplate?.id }]"
          @click="selectedHandoverTemplate = temp"
        >
          {{ temp.name }}
        </span>
      </div>
      <p v-if="!allowSend && templateNameRef" class="help is-danger">Mẫu email không hợp lệ với sản phẩm</p>
    </div>
    <Template1 v-if="contents && allowSend" :content="contents[0]" previewMode />
    <div class="is-flex is-justify-content-center mt-4">
      <button
        :class="['button is-primary', { 'is-loading': isSending }]"
        :disabled="!allowSend"
        @click="openConfirmModal()"
      >
        Gửi thông báo
      </button>
    </div>
    <Modal 
      v-if="showmodal" 
      v-bind="showmodal" 
      @close="showmodal = undefined" 
      @confirm="send"
    />
  </div>
</template>