<template>
  <div class="row m-0 p-0 align-items-center">
    <div class="col-sm-12 col-md-6 p-0">
      <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
      ><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_textarea') }}</span>
    </div>

    <div class="col-sm-12 col-md-6 p-0 text-end">
      <a href="#" @click.prevent="openModal" title="Edytuj" class="text-primary me-2"
        ><i class="material-icons-outlined">create</i></a
      >
      <b-modal
        no-enforce-focus
        class_other="modal-xl"
        v-model="modalBox"
        :title="t('pagebuilder.widget_textarea')"
        v-on:hide="onCloseModal"
      >
        <div style="min-height: 400px">
          <div class="mb-4" v-if="delayModal">
            <div class="form-group">
              <editor
                api-key="no-api-key"
                rows="12"
                class="form-control"
                v-model="text"
                :init="{ ...vtinymce, language: locale }"
              />
            </div>
          </div>
        </div>
        <div class="d-flex">
          <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
            {{ t('pagebuilder.save') }}
          </button>
        </div>
      </b-modal>
      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
        ><i class="material-icons-outlined">delete</i></a
      >
    </div>
    <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
  </div>
</template>
<script>
import MagicoModal from './../MagicoModal.vue'
import tinymceConfig from '../tinymce/config.js'

import Editor from '@tinymce/tinymce-vue'
import { nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
export default {
  emits: ['update:modelValue'],
  components: {
    'b-modal': MagicoModal,

    editor: Editor // <- To jest TINYMCE
  },
  props: {
    modelValue: Object
  },
  setup() {
    const { t, locale } = useI18n()
    return { t, locale }
  },
  mounted: function () {
    let vm = this
    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
    if (this.modelValue.open) {
      this.modalBox = true
      setTimeout(function () {
        vm.delayModal = true
      }, 200)
    }
    console.log('mounted textarea')
    this.$emit('update:modelValue', this.modelValue)
  },
  data: function () {
    return {
      langs: {
        saveclose: 'Zapisz',
        label: 'Pole tekstowe',
        close: 'Zamknij'
      },
      height: window.innerHeight - window.innerHeight / 4,
      modalBox: false,
      delayModal: false,
      editor: null,
      text: '',
      name: 'core_section_textarea',
      vtinymce: Object.assign(tinymceConfig, {
        setup: function (e) {
          console.log(e)
        },
        file_picker_callback: (callback) => {
          if (this.$filechooser) {
            this.$filechooser.open({
              chooseCallback: function (ev) {
                console.log('filePathChosed', ev)
                callback(ev.publicUrl)
              }
            })
          }
        }
      })
    }
  },
  watch: {
    modalBox: function () {
      if (this.modalBox) {
        document.addEventListener('focusin', (e) => {
          if (
            e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
          ) {
            e.stopImmediatePropagation()
          }
        })
      }
      console.log('focus')
    }
  },
  computed: {
    ctext: function () {
      return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
    }
  },
  methods: {
    openModal: function () {
      let vm = this
      this.modalBox = true
      setTimeout(function () {
        vm.delayModal = true
      }, 200)
      // nextTick(() => {
      //   vm.delayModal = true
      // })
    },
    removeItem: function () {
      this.$emit('itemRemoved', this.modelValue)
    },
    onCloseModal: function () {
      setTimeout(
        function () {
          this.modalBox = false
          this.delayModal = false
          this.$emit('update:modelValue', {
            name: this.name,
            text: this.text
          })
        }.bind(this),
        200
      )
    }
  }
}
</script>
