<!--
  Program: Editor
  Author: SDL
  Brief: Editor using Cafenote
-->
<template>
  <div :id="editorId" :ref="editorId"></div>
</template>
<script>
import { mapGetters } from 'vuex';
// import $ from 'jquery';
import SDLUtil from '@/utils/SDLUtil';

export default {
  inheritAttrs: true,
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      required: true,
      type: String,
      default: '',
    },
    format: {
      required: false,
      type: String,
      default: 'html',
    },
  },
  data() {
    return {
      cafe: {},
      editorId: 'editor',
      config: {
        language: this.getLocale(this.$i18n.locale),
        height: 250,
        plugins: 'autolink dragdrop expaste emoticon findreplace image lineheight link lists listsstyle lock media mhtmlloader pagebreak paragraphformat superscript subscript table typo2kr',
        default_font_size: '11',
        default_font_family: "SamsungOneKorean, '맑은 고딕', Gulim, Arial",
        default_line_height: '1.5',
        font_formats: ['SamsungOneKorean', '굴림', '굴림체', '궁서', '궁서체', '돋움', '돋움체', '맑은 고딕', '바탕', '바탕체', 'Arial', 'Courier', 'sans-serif', 'Verdana'],
        font_size_style_values: ['8pt', '9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '20pt', '36pt', '48pt'],
        line_heights: ['0.5', '1', '1.2', '1.5', '1.9', '2', '3', '4', '5'],
        invalid_elements: 'script',
        codeview_indent: true,
      },
    };
  },
  computed: {
    ...mapGetters({
      locale: 'getLocale',
    }),
  },
  methods: {
    setContent() {
      if (this.modelValue && this.modelValue !== this.getContent()) {
        this.cafe.setContent(this.editorId, this.modelValue, { format: this.format });
      }
    },
    getContent() {
      if (this.format === 'html') {
        const html = this.cafe.getContent(this.editorId, { format: this.format });
        // return $($.parseHTML(html)[5]).html();
      }
      return this.cafe.getContent(this.editorId, { format: this.format });
    },
    loadComplete() {
      this.setContent();

      // rich textarea
      // $('iframe')
      //   .contents()
      //   .find('#cafe-note-contents')
      //   .bind('blur', () => {
      //     this.$emit('update:modelValue', this.getContent());
      //   });

      // html textarea
      // $(`#${this.editorId}`)
      //   .next()
      //   .find('textarea')
      //   .bind('blur', () => {
      //     this.$emit('update:modelValue', this.getContent());
      //   });
      SDLUtil.showLoadingBar(false);
    },
    getLocale(lang) {
      return lang === 'ko_KR' ? lang : 'en_US';
    },
  },
  watch: {
    modelValue() {
      if (this.cafe.setContent) {
        this.setContent();
      }
    },
    locale(lang) {
      const content = this.getContent();
      this.cafe.destroy(this.editorId);
      this.config.language = this.getLocale(lang);
      this.cafe.create(this.editorId, this.config, () => {
        this.loadComplete();
        this.$emit('update:modelValue', content);
      });
    },
  },
  created() {
    this.editorId = `editor_${new Date().getTime()}${Math.floor(Math.random() * 100) + 1}`;
  },
  mounted() {
    this.$nextTick(() => {
      SDLUtil.showLoadingBar(true);
      SDLUtil.importJS(`${this.$CONTEXT}/static/libs/cafe/2.3.25/cafe_2.3.25.min.js`)
        .then(window => {
          this.cafe = window.cafe;
          this.cafe.create(this.editorId, this.config, this.loadComplete);
        })
        .catch(err => {
          console.error(err);
        });
    });
  },
  beforeUnmount() {
    this.cafe.destroy(this.editorId);
  },
};
</script>
<style scoped></style>
