<template>
  <MainTemplate>
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Templates</h1>
      </div>
    </template>
    <template #diffMain>
      <div class="flex flex-col gap-4 grow pl-7">
        <div class="flex flex-col gap-2 grow pr-7">
          <EmailEditor
            ref="emailEditor"
            minHeight="100%"
            :options="options"
            @load="editorLoaded"
            @ready="editorReady"
          />
        </div>
        <div class="flex flex-row gap-4">
          <button primary class="!w-fit" @click="saveDesign">Save Design</button>
          <button primary-outline class="!w-fit" @click="loadBlank">leeren</button>
        </div>
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { EmailEditor } from "vue-email-editor";
import { options } from "@/helpers/unlayerEditor";
</script>

<script lang="ts">
export default defineComponent({
  methods: {
    // called when the editor is created
    editorLoaded() {
      console.log("editorLoaded");
      // Pass the template JSON here
      // this.$refs.emailEditor.editor.loadDesign({});
    },
    // called when the editor has finished loading
    editorReady() {
      console.log("editorReady");
      (this.$refs.emailEditor as typeof EmailEditor).editor.setBodyValues({
        contentWidth: "100%",
        backgroundColor: "#ffffff",
        linkStyle: {
          linkColor: "#990b00",
          linkHoverColor: "#bb1e10",
          linkUnderline: false,
          linkHoverUnderline: false,
        },
      });
    },
    loadBlank() {
      (this.$refs.emailEditor as typeof EmailEditor).editor.loadBlank();
    },
    loadDesign() {
      (this.$refs.emailEditor as typeof EmailEditor).editor.loadDesign((design: any) => {
        console.log("saveDesign", design);
      });
    },
    saveDesign() {
      (this.$refs.emailEditor as typeof EmailEditor).editor.saveDesign((design: any) => {
        console.log("saveDesign", design);
      });
    },
    exportHtml() {
      (this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
        minify: true,
        onlyHeader: true,
      });
      (this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
        minify: true,
      });
      (this.$refs.emailEditor as typeof EmailEditor).editor.exportHtml((data: any) => {}, {
        minify: true,
        onlyFooter: true,
      });
    },
  },
});
</script>
