<template>
  <ErrorBoundary @on-error="onFormEditorError">
    <template #error="{ error, clearError }">
      <div class="flex-grow w-full flex items-center justify-center flex-col gap-4">
        <h1 class="text-blue-800 text-2xl font-medium">
          Oops! Something went wrong.
        </h1>
        <p class="text-gray-500 max-w-lg text-center">
          It looks like your last action caused an issue on our side. We
          apologize for
          the
          inconvenience.
        </p>
        <div class="flex gap-2 mt-4">
          <UButton
            icon="i-material-symbols-undo"
            @click="clearEditorError(error, clearError)"
          >
            Go back one step
          </UButton>
          <UButton
            variant="outline"
            icon="i-heroicons-chat-bubble-left-right-16-solid"
            @click="onErrorContact(error)"
          >
            Report this error
          </UButton>
        </div>
      </div>
    </template>
  
    <slot />
  </ErrorBoundary>
</template>
  
<script setup>
const crisp = useCrisp()
const workingFormStore = useWorkingFormStore()
const form = storeToRefs(workingFormStore).content

// Clear error and go back 1 step in history
const clearEditorError = (error, clearError) => {
  crisp.enableChatbot()
  workingFormStore.undo()
  clearError()
}
const onFormEditorError = (error) => {
  console.error('Form Editor Error Handled', error)
  crisp.pauseChatBot()
  const eventData = {
    message: error.message,
    // take first 200 characters
    stack: error.stack.substring(0, 100)
  }
  try {
    crisp.pushEvent('form-editor-error', eventData)
  } catch (e) {
    console.error('Failed to send event to crisp', e, eventData)
  }
}
const onErrorContact = (error) => {
  crisp.pauseChatBot()
  let errorReport = 'Hi there, I have a technical issue with the form editor.'
  if (form.value.slug) {
    errorReport += ` The form I am editing is: \`${form.value.slug}\`.`
  }
  errorReport += ` And here are technical details about the error: \`\`\`${error.stack}\`\`\``
  try {
    crisp.openAndShowChat(errorReport)
    crisp.showMessage(`Hi there, we're very sorry to hear you experienced an issue with OpnForm.
        We'll be in touch about it very soon! In the meantime, I recommend that you try going back one step, and save your changes.`, 2000)
  } catch (e) {
    console.error('Crisp error', e)
  }
}
</script>
  