<template>
  <div class="rounded-xl bg-gray-50 px-6 py-5">
    <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
      {{ dataRef.name }}
    </p>
    <div class="flex flex-col gap-4 rounded-xl bg-gray-200 px-6 py-5">
      <p class="text-lg font-semibold text-gray-900">
        Description
      </p>
      <input-wrapper
          v-if="dataRef.hasOwnProperty('eyebrow_heading')"
          is-vertical
          field="eyebrow_heading"
          label-text="Eyebrow heading *"
          class="w-full mb-4"
          :value="dataRef.eyebrow_heading"
          :limit="51"
      >
        <input
            v-model="dataRef.eyebrow_heading"
            name="eyebrow_heading"
            type="text"
            placeholder="Eyebrow heading"
            :maxlength="51"
            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
        />
      </input-wrapper>
      <input-wrapper
          v-if="dataRef.hasOwnProperty('title')"
          is-vertical
          field="title"
          label-text="Title *"
          class="w-full mb-4"
          :value="dataRef.title"
          :limit="51"
      >
        <input
            v-model="dataRef.title"
            name="title"
            type="text"
            placeholder="Title"
            :maxlength="51"
            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
        />
      </input-wrapper>
      <input-wrapper
          is-vertical
          field="description"
          label-text="Description *"
          class="w-full mb-4"
          :value="paragraphWordCount"
          :show-count="true"
      >
        <QuillEditor v-model="dataRef.paragraph"/>
      </input-wrapper>
    </div>
    <div class="rounded-xl bg-gray-200 mt-4" v-if="dataRef.hasOwnProperty('featured_image')">
      <card :classes="'bg-gray-200'"
            :title="dataRef?.upload_title ? dataRef.upload_title : 'Featured Image'"
            supporting_text="Recommended dimension: 1200*1060px">
        <VFileUpload
            name="image"
            :type="dataRef?.source_type ?? 'image'"
            height="h-[395px]"
            v-model="dataRef.featured_image"
        />
      </card>
    </div>
    <div class="rounded-xl bg-gray-200 mt-4 px-6 py-5 flex flex-col gap-4" v-if="dataRef.hasOwnProperty('button')">
      <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
        Link To
      </p>
      <VToggle name="show" v-model="dataRef.button.show" title="Show Button"/>
      <input-wrapper
          v-if="dataRef.button"
          is-vertical
          field="title"
          label-text="Button label *"
          class="w-full mb-4"
          :value="dataRef.button.title"
          :limit="51"
      >
        <input
            v-model="dataRef.button.title"
            name="title"
            type="text"
            placeholder="Title"
            :maxlength="51"
            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
        />
      </input-wrapper>
      <linked-to
          v-if="dataRef?.button"
          name="button"
          v-model:type="dataRef.button.type"
          v-model:url="dataRef.button.url"
          v-model:openInNewTab="dataRef.button.open_in_new_tab"
          :sites="sites"
          :forms="forms"
      />
    </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";
import LinkedTo from "@/components/common/LinkedTo.vue";
import VToggle from "@/components/common/Toggle.vue";

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

const emit = defineEmits(["update"]);
const props = defineProps({
  ...defaultProps,
  forms: {
    type: Array,
    default: () => []
  }
});

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

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