<script setup>
import { ref, watch } from 'vue';
import SubprocessNodeConfiguration from './SubprocessNodeConfiguration.vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  nodeData: {
    type: Object,
    required: true
  },
});

const emit = defineEmits(['update:modelValue', 'update']);

const showModal = ref(props.modelValue);
const localNodeData = ref({});

// Sync modal visibility with the modelValue prop
watch(() => props.modelValue, (value) => {
  showModal.value = value;
});

// Emit updates when the modal's visibility changes
watch(() => showModal.value, (value) => {
  emit('update:modelValue', value);
});

// Keep a local copy of the node data to avoid direct prop mutation
watch(() => props.nodeData, (value) => {
  localNodeData.value = JSON.parse(JSON.stringify(value));
}, { deep: true, immediate: true });

// Handle updates from the configuration component
function handleUpdate(updatedData) {
  localNodeData.value = updatedData;
}

// Save changes and close the modal
function saveAndClose() {
  emit('update', localNodeData.value);
  closeModal();
}

// Close the modal without saving
function closeModal() {
  showModal.value = false;
}
</script>

<template>
  <RsModal
    v-model="showModal"
    title="Sub-process Configuration"
    size="5xl"
    :okCallback="saveAndClose"
    okTitle="Save Changes"
    :cancelCallback="closeModal"
    cancelTitle="Cancel"
  >
    <template #body>
      <div class="mb-6">
        <div class="flex items-start">
          <div class="mr-4 text-teal-500 flex-shrink-0 mt-1">
            <Icon name="material-symbols:hub" class="text-2xl" />
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-1">Configure Sub-process</h3>
            <p class="text-sm text-gray-600">
              Select a process to execute as a sub-process. The main process will pause and wait for the selected sub-process to complete before continuing.
            </p>
          </div>
        </div>
      </div>

      <!-- Main configuration area -->
      <SubprocessNodeConfiguration 
        :nodeData="localNodeData" 
        @update="handleUpdate"
      />

      <!-- Quick Reference Guide -->
      <div class="mt-6 bg-teal-50 p-4 rounded-md border border-teal-100">
        <h4 class="font-medium text-teal-700 mb-2 flex items-center">
          <Icon name="material-symbols:info-outline" class="mr-1" />
          How Sub-processes Work
        </h4>
        <div class="text-sm text-teal-700">
          <ul class="list-disc list-inside space-y-1">
            <li>Sub-processes run as independent instances.</li>
            <li>You can map input variables from the parent process to the sub-process.</li>
            <li>Output variables from the sub-process can be mapped back to the parent.</li>
            <li>The parent process will wait until the sub-process reaches an end state.</li>
          </ul>
        </div>
      </div>
    </template>
  </RsModal>
</template> 