<script setup>
import { ref, watch, computed } from "vue";
import { useGraphqlBridge } from "../../bridges/graphql";
const props = defineProps({
  templateCode: { type: String, required: true },
  parentTemplates: { type: [String, Array], required: false, default: () => [] }
});
const template = ref();
const templateScript = ref();
const parentTemplates = computed(() => {
  if (typeof props.parentTemplates === "string") {
    if (props.parentTemplates && props.parentTemplates != "") return props.parentTemplates.split("|");
    else return [];
  } else {
    return props.parentTemplates;
  }
});
const parentTemplatesNext = computed(() => {
  return [...parentTemplates.value, props.templateCode];
});
watch(() => props.templateCode, () => {
  if (!parentTemplates.value.includes(props.templateCode) && props.templateCode) {
    const { graphqlOperation } = useGraphqlBridge();
    if (graphqlOperation["documentTemplateByTemplateCode"]) {
      graphqlOperation["documentTemplateByTemplateCode"].call(["*"], { templateCode: props.templateCode }).then((result) => {
        template.value = result.editTemplate;
        templateScript.value = result.templateScript;
      });
    }
  }
}, { immediate: true });
</script>

<template>
  <form-pad :template="template" :template-script="templateScript" :parent-templates="parentTemplatesNext"></form-pad>
</template>
