<script setup lang="ts">
import { toRefs, ref } from 'vue'
import {
  LabelControl,
  Tooltip,
} from './index'
import {
  purifyHtml,
  initWpEditor,
  decodeEntities,
} from '@/helper'

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
})
const { params } = toRefs(props)
const arg = params.value
const default_value = ref<string>(arg?.['default'] || '')
const isEditor = ref<boolean>(arg['editor'] ?? false)
const emit = defineEmits(['input', 'fieldData'])
const disable = ref<boolean>(arg['disabled'] ?? false)
const inputValues = ref<any>([])
const editorInitialized = ref<boolean>(false)
const editorId = arg['id']

// Set for default value.
if (default_value.value !== '' && !disable.value) {
  inputValues.value[editorId] = default_value.value
  emit('fieldData', inputValues.value)
}

const emitValueChange = () => {
  inputValues.value[editorId] = default_value
  emit('fieldData', inputValues.value)
}
const editorValueChange = (value: any) => {
  inputValues.value[editorId] = value
  emit('fieldData', inputValues.value)
}

if (isEditor.value && !editorInitialized.value) {
  initWpEditor(
    editorId,
    {
      tinymce: {
        plugins: 'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview',
        toolbar1: 'formatselect bold italic | bullist numlist | blockquote | alignleft aligncenter alignright | link unlink | wp_more | spellchecker',
        wp_theme: true,
        setup: (editor: any) => {
          editor.on('init', () => {
            editorInitialized.value = true
            editor.setContent(decodeEntities(default_value.value))
          })
          editor.on('change', () => {
            editorValueChange(editor.getContent())
          })
        },
      },
      mediaButtons: true,
      quicktags: true,
    }
  )
}
</script>

<template>
  <div>
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-mb-2 stwlite-tw-gap-2">
      <LabelControl
        :params="arg"
      />
    </div>
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-min-w-72 stwlite-tw-mb-2 stwlite-tw-gap-2">
      <textarea
        :id="editorId"
        v-model="default_value"
        :name="arg['id']" 
        :placeholder="arg['placeholder']"
        :rows="4"
        :disabled="disable"
        :class="[ 'stwlite-tw-block stwlite-tw-w-full stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md stwlite-tw-shadow-sm stwlite-tw-placeholder-gray-400 focus:stwlite-tw-outline-none', disable ? 'stwlite-tw-bg-gray-100 stwlite-tw-text-gray-500 stwlite-tw-cursor-not-allowed' : 'stwlite-tw-bg-white stwlite-tw-text-gray-900' ]"
        @input="emitValueChange"
      />
      <Tooltip :params="arg" />
    </div>
    <p v-if="arg['description'] !== 'undefined'" class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mt-2" v-html="purifyHtml(arg?.['description'] ?? '')" />
  </div>
</template>
