<template>
  <div class="w-100">
    <!-- tinymceScriptSrc="/tinymce/tinymce.min.js" -->
    <editor
      api-key="pnxkbox1zj5zaghgi1dolyi9ch28kr9ohnvc1qz3beeqdfwg"
      ref="global-tiny-editor"
      output-format="html"
      v-model="editorData"
      :init="tinyMceConfiguration"
    >
    </editor>

    <div class="my-3" v-if="showSaveButton">
      <button-component
        @click="save"
        type="button"
        classes="btn-primary"
        buttonText="ذخیره"
        title="ذخیره"
        :buttonLoading="buttonLoading"
      ></button-component>
    </div>
  </div>
</template>

<script>
// import Editor from "@tinymce/tinymce-vue";

export default {
  props: {
    showSaveButton: {
      default: true,
    },
    tinyText: {
      default: "",
    },
    parentButtonLoading: {
      default: false,
    },
  },



  data() {
    return {
      showTiny: false,

      buttonLoading: this.parentButtonLoading,
      editorData: "",
      api_key: "pnxkbox1zj5zaghgi1dolyi9ch28kr9ohnvc1qz3beeqdfwg",
      tinyMceConfiguration: {
        content_langs: [
          { title: "English", code: "en" },
          { title: "Persian", code: "fa" },
        ],

        // selector: "#ttextarea",
        language: "fa_IR",
        language_url: "/tinymce/langs/fa_IR.js",
        directionality: "rtl",
        // baseUrl: '/',
        toolbar_sticky: true,
        force_br_newlines: false,
        force_p_newlines: false,
        height: "25em",
        width: "100%",

        plugins: "link",
        toolbar:
          "searchreplace undo redo copy paste | formatselect  styleselect | bold italic underline strikethrough | alignleft aligncenter 	alignright alignjustify | bullist numlist outdent indent | link image table | footnotes code hadithyab help",
        contextmenu:
          "copy paste pastetext removeformat | DeleteErab ParseHadith | footnotes link image",
      },
    };
  },
  computed: {
    editorModel: {
      get() {
        return this.editorData;
      },
      set(value) {
        this.editorData = value;
      },
    },
  },
  methods: {
    save() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      this.$emit("on-save", this.editorData);
      return this.editorData;
    },
  },
  mounted() {
    // this.showTiny = true

    // this.$nextTick(() => {
    this.editorData = this.tinyText;
    var n = Math.floor(Math.random() * 11);
    var k = Math.floor(Math.random() * 1000000);
    var m = String.fromCharCode(n) + k;
    this.api_key = m;

    // })
  },
  watch: {
    tinyText(newVal) {
      this.editorData = newVal;
    },
    parentButtonLoading(newVal) {
      this.buttonLoading = newVal;
    },
  },
};
</script>

<style></style>
