<template>
  <div class="rounded-xl bg-gray-50 px-6 py-5">
    <p class="text-lg font-semibold text-gray-900 pb-4">
      {{ dataRef.name }}
    </p>
    <div class="rounded-xl bg-gray-200" v-if="dataRef.hasOwnProperty('featured_image')">
      <card :classes="'bg-gray-200'" title="Featured Image"
            supporting_text="Recommended dimension: 1200*1060px">
        <VFileUpload
            name="image"
            height="h-[395px]"
            v-model="dataRef.featured_image"
        />
      </card>
    </div>
    <div class="flex flex-col gap-4 rounded-xl bg-gray-200 px-6 py-5 mt-4" v-if="dataRef.hasOwnProperty('caption')">
      <p class="text-lg font-semibold text-gray-900 border-b border-gray-200">
        Caption
      </p>
      <input-wrapper
          is-vertical
          field="caption"
          label-text="Caption *"
          class="w-full mb-4"
          :value="captionWordCount"
          :show-count="true"
      >
        <QuillEditor v-model="dataRef.caption"/>
      </input-wrapper>
    </div>
  </div>
</template>
<script setup>
import {ref, computed, inject} from "vue";
import {defaultProps} from "@/components/helpers/defaultProps";
import InputWrapper from "@/components/common/InputWrapper.vue";
import QuillEditor from "@/components/common/QuillEditor.vue";
import Card from "@/components/common/Card.vue";
import DefaultFileUpload from "@/components/common/FileUpload.vue";

// Inject the FileUpload component or fallback to the default  one
const VFileUpload = inject("VFileUpload", DefaultFileUpload);

const emit = defineEmits(["update"]);
const props = defineProps({
  ...defaultProps,
});

const dataRef = ref(props.data.component);

const captionWordCount = computed(() => {
  const plainText = dataRef.value.caption?.replace(/<[^>]*>/g, ' ').trim();
  const words = plainText.split(/\s+/).filter(word => word.length > 0);
  return words.length;
});
</script>
