<script setup>
import useSendHandoverEmail from '@/components/handover/useSendHandoverEmail';

const props = defineProps({
  products: Array
});

const { $getdata, $store } = useNuxtApp();
const emit = defineEmits(['close', 'modalevent']);
function cancel() {
  emit('close')
}

async function confirm() {
  await send();
  emit('modalevent', { name: 'confirm'} );
  emit('close');
}

const handoverTemplates = ref([]);
const selectedHandoverTemplate = ref(null);
const filter = ref({ elpro__stage__gt: 0 });
const templateNameRef = computed(() => selectedHandoverTemplate.value?.name);
const { send, isSending } = useSendHandoverEmail(filter, templateNameRef);

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 not all products have CN customers
    const allCn = props.products.every(p => 
      p.prdbk__transaction__customer__type__code === 'CN' 
      && !p.prdbk__transaction__co_op
    );
    return allCn;
  }
  if (templateNameRef.value === 'Biên bản bàn giao đất - Tổ chức') {
    // disallow submit if not all products have TC customers
    const allTc = props.products.every(p => p.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 not all products have coop customers
    const allDsh = props.products.every(p => Boolean(p.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;
});
</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 các sản phẩm đã chọn</p>
    </div>
    <div>
      <p v-if="allowSend" class="my-4">
        Bạn có đồng ý gửi {{$store.selectedProductsForHandoverEmail.length}} thông báo không?
      </p>
      <div class="field is-grouped">
        <div class="control is-expanded">
          <button 
            :class="['button is-primary has-text-white', { 'is-loading': isSending }]"
            @click="confirm()"
            :disabled="!allowSend"
          >
            Đồng ý
          </button>
          <button class="button is-white ml-2" @click="cancel()">Hủy</button>
        </div>
      </div>
    </div>
  </div>
</template>