<template>
  <div>
    <VCard class="mx-auto">
      <VuetifyTiptap
        v-model="content"
        markdown-theme="github"
        :maxHeight="maxHeight"
        :minHeight="editorMinHeight"
        :maxWidth="maxWidth"
        :disabled="isViewMode"
      />
    </VCard>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  initialContent: String,
  maxHeight: String,
  minHeight: String,
  maxWidth: String,
  storageKey: String,
  clearOnLoad: Boolean,
});

const route = useRoute();

const editorMinHeight = computed(() => {
  const type = route.query?.type;
  const isAddPage =
    route.name?.toString().includes("add") || route.path?.includes("/add");
  return ["edit", "add", "view"].includes(type as string) || isAddPage
    ? props.minHeight
    : "100px";
});

const isViewMode = computed(() => route.query?.type === "view");

const content = ref(localStorage.getItem(props.storageKey) || "");

onMounted(() => {
  if (props.clearOnLoad) {
    content.value = "";
    localStorage.removeItem(props.storageKey);
  }
  if (props.initialContent !== undefined) {
    content.value = props.initialContent;
  }
});

watch(
  () => props.initialContent,
  (newVal) => {
    content.value = newVal;
  },
);

watch(
  () => content.value,
  (newVal) => {
    updateContent();
    localStorage.setItem(props.storageKey, newVal);
  },
);

const emit = defineEmits(["content-updated"]);

const updateContent = () => {
  emit("content-updated", content.value);
};
</script>

<style scoped></style>
