<template>
  <div class="my-tinymce">
    <Editor v-model="contentValue" :init="myInit" />
  </div>
</template>

<script setup>
import axios from 'axios'
import tinymce from 'tinymce/tinymce'
import '@/plugins/tinymce/importTinymce'
import Editor from '@tinymce/tinymce-vue'
import { initTiny } from '@/plugins/tinymce/tinymce'
import { onMounted, toRefs, ref, reactive, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  // placeholder
  placeholder: {
    type: String,
    default: 'Please enter content',
  },
  // Default style
  style: {
    type: Object,
    default: () => {
      return { width: '100%', heigth: '400' }
    },
  },
  // image upload server address
  imgUploadUrl: {
    type: String,
    default: '/api/v1/media',
  },
  batchId: {
    type: String,
  },
})
const emit = defineEmits(['update:modelValue'])

// Parameter custom initialization
const customer = (init) => {
  // Allow the outside world to pass in height and placeholder
  init.height = props.style.heigth
  init.placeholder = props.placeholder

  // Paste pictures and automatically process base64
  init.urlconverter_callback = (url, node, _onSave, _name) => {
    if (node === 'img' && url.startsWith('blob:')) {
      tinymce.activeEditor && tinymce.activeEditor.uploadImages()
    }
    return url
  }
  // upload picture
  init.images_upload_handler = (blobInfo, success, failure) => {
    imgUploadFn(blobInfo, success, failure)
  }
  return init
}
// const myInit = ref(customer(initTiny(props.batchId)));
const state = reactive({
  myInit: ref(customer(initTiny(props.batchId))),
  contentValue: props.modelValue, // binding text
  timeout: null,
})

onMounted(() => {
  tinymce.init({})
})

// Listen for text changes and pass them to the outside world
watch(
  () => state.contentValue,
  () => {
    debounce(() => {
      emit('update:modelValue', state.contentValue)
    })
  }
)
// Listen to the default value. The first time a v-model is passed in from the outside world, it is assigned to contentValue.
watch(
  () => props.modelValue,
  (n) => {
    if (n && n !== state.contentValue) {
      state.contentValue = n
    }
  }
)

const debounce = (fn, wait = 400) => {
  if (state.timeout !== null) {
    clearTimeout(state.timeout)
  }
  state.timeout = setTimeout(fn, wait)
}

const imgUploadFn = async (blobInfo, success, failure) => {
  // Can limit image size
  // if (blobInfo.blob().size / 1024 / 1024 > 2) {
  //   failure('Upload failed, please control the image size within 2M')
  // } else {}
  const formData = new FormData()
  formData.append('file', blobInfo.blob(), blobInfo.filename())
  formData.append('batch_id', props.batchId)
  const response = await axios.post('https://api.madomotor.ir'.props.imgUploadUrl, formData)

  if (response && response.status == 200) {
    return success(response.data.data.url)
  }
  return failure(`HTTP Error: ${response.status}`)
}

const { myInit, contentValue } = toRefs(state)
</script>
