// import this after install `@mdi/font` package
import "@mdi/font/css/materialdesignicons.css";
import { VFileUpload, VFileUploadItem } from "vuetify/labs/VFileUpload";
import { VMaskInput } from "vuetify/labs/VMaskInput";
// import { VTimePicker } from "vuetify/labs/VTimePicker";

import "vuetify/styles";
import { createVuetify } from "vuetify";
import { Icon } from "@iconify/vue";

import {
  VuetifyTiptap,
  VuetifyViewer,
  createVuetifyProTipTap,
  BaseKit,
  Bold,
  Italic,
  Underline,
  Strike,
  Color,
  Highlight,
  Heading,
  TextAlign,
  FontFamily,
  FontSize,
  SubAndSuperScript,
  BulletList,
  OrderedList,
  TaskList,
  Indent,
  Link,
  Image,
  Video,
  Table,
  Blockquote,
  HorizontalRule,
  Code,
  CodeBlock,
  Clear,
  Fullscreen,
  History,
} from "vuetify-pro-tiptap";
import "vuetify-pro-tiptap/style.css";

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    defaults: {
      VTextField: {
        variant: "outlined",
        density: "comfortable",
      },
      VAutocomplete: {
        variant: "outlined",
        density: "comfortable",
        menuProps: { attach: document.body, zIndex: 3000 },
      },
      VSelect: {
        variant: "outlined",
        density: "comfortable",
        menuProps: { attach: document.body, zIndex: 3000 },
      },
      VTextarea: {
        variant: "outlined",
        density: "comfortable",
      },
      // VTimePicker: {
      //   density: "compact",
      //   variant: "outlined",
      //   hint: "This field is required",
      // },
    },
    theme: {
      defaultTheme: "iservice365",
      themes: {
        iservice365: {
          dark: false,
          colors: {
            primary: "#042134",
            "primary-button": "#1867C0",
            "text-primary": "#052439",
          },
        },
      },
    },
    icons: {
      defaultSet: "iconify",
      sets: {
        iconify: {
          component: (props: any) => h(Icon, { icon: props.icon }),
        },
      },
    },
    components: {
      VFileUpload,
      VFileUploadItem,
      VMaskInput,
    },
  });

  const { addFile } = useFile();

  const vuetifyProTipTap = createVuetifyProTipTap({
    lang: "en",
    markdownTheme: "github",
    components: {
      VuetifyTiptap,
      VuetifyViewer,
      // VTimePicker,
    },
    extensions: [
      BaseKit.configure({
        placeholder: {
          placeholder: "Enter some text...",
        },
      }),
      Bold,
      Italic,
      Underline,
      Strike,
      Code.configure({ divider: true }),
      Heading,
      TextAlign,
      TextAlign.configure({
        defaultAlignment: "center", // or you can try '' if null doesn't work
      }),
      FontFamily,
      FontSize,
      Color,
      Highlight.configure({ divider: true }),
      SubAndSuperScript.configure({ divider: true }),
      Clear.configure({ divider: true }),
      BulletList,
      OrderedList,
      TaskList,
      Indent.configure({ divider: true }),
      // Link,
      Image.configure({
        // imageTabs: [{ name: 'SELECT', component: SelectImage }],
        // hiddenTabs: ['upload'],
        divider: true,
        // upload(file: File) {
        //   console.log("file :>> ", file);
        //   const url = URL.createObjectURL(file);
        //   console.log("mock upload api :>> ", url);
        //   return Promise.resolve(url);
        // },
        upload(file: File) {
          return new Promise(async (resolve, reject) => {
            try {
              const response = await addFile(file);
              resolve(
                `${useRuntimeConfig().public.API_DO_STORAGE_ENDPOINT}/${
                  response.id
                }`
              );
            } catch (error) {
              reject(new Error("Upload failed"));
            }

            // const xhr = new XMLHttpRequest();
            // xhr.open("POST", "/api/files/upload/v2?status=draft");
            // xhr.onload = function () {
            //   if (this.status === 200) {
            //     const responseID = JSON.parse(this.response);
            //     resolve(`${S3_URL}/${responseID.id}`);
            //   } else {
            //     reject(new Error("Upload failed"));
            //   }
            // };
            // xhr.onerror = function () {
            //   reject(new Error("Upload failed"));
            // };
            // const formData = new FormData();
            // formData.append("file", file);
            // xhr.send(formData);
          });
        },
      }),
      // Video,
      Table.configure({
        divider: true,
        resizable: true,
        handleWidth: 5,
        cellMinWidth: 50,
        allowTableNodeSelection: true,
        bubbleMenu: true,
        tableMenu: true,
      }),
      Blockquote,
      HorizontalRule,
      CodeBlock.configure({ divider: true }),
      History.configure({ divider: true }),
      // Fullscreen,
    ],
  });

  app.vueApp.use(vuetify);
  app.vueApp.use(vuetifyProTipTap);
});
