<template>
  <div :class="{'bg-gray-50 px-6 py-5 rounded-xl': !dataRef?.as_item, '-mx-6 -my-5': dataRef?.as_item}">
    <p class="text-lg font-semibold text-gray-900 pb-4" :class="{'border-b border-gray-200': !dataRef?.has_extra}">
      {{ dataRef?.name }}
    </p>
    <div class="flex flex-col gap-4 rounded-xl py-5 bg-gray-50 px-0" :class="{'!bg-gray-200 !px-6': dataRef?.hasOwnProperty('has_extra')}">
      <div :class="{'flex gap-4': dataRef.hasOwnProperty('icon')}" v-if="dataRef.hasOwnProperty('icon') || dataRef.hasOwnProperty('title')">
        <input-wrapper
            v-if="dataRef.hasOwnProperty('icon')"
            is-vertical
            field="icon"
            label-text="Icon *"
            :value="dataRef.icon"
        >
          <IconSelector id="icon" v-model="dataRef.icon" />
        </input-wrapper>
        <input-wrapper
            v-if="dataRef.hasOwnProperty('title')"
            is-vertical
            field="title"
            :label-text="dataRef?.title_label ?? 'Title *'"
            class="w-full mb-4"
            :value="dataRef.title"
            :limit="100"
        >
          <input
              v-model="dataRef.title"
              name="title"
              type="text"
              placeholder="Title"
              :maxlength="100"
              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
          />
        </input-wrapper>
        <input-wrapper
            v-if="dataRef.hasOwnProperty('sub_title')"
            is-vertical
            field="title"
            :label-text="dataRef?.sub_title_label ?? 'Subtitle *'"
            class="w-full mb-4"
            :value="dataRef.sub_title"
            :limit="100"
        >
          <input
              v-model="dataRef.sub_title"
              name="sub_title"
              type="text"
              placeholder="Subtitle"
              :maxlength="100"
              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
          />
        </input-wrapper>
      </div>
      <input-wrapper
          is-vertical
          v-if="dataRef.hasOwnProperty('supporting_text')"
          field="supporting_text"
          :label-text="dataRef?.supporting_text_label ?? 'Supporting Text *'"
          class="w-full mb-4"
          :value="dataRef.supporting_text"
          :limit="dataRef?.is_editor ? null : (dataRef.supporting_text_max_length ?? 500)"
      >
        <QuillEditor v-if="dataRef?.is_editor" v-model="dataRef.supporting_text"/>
        <textarea
            v-else
            v-model="dataRef.supporting_text"
            name="supporting_text"
            type="text"
            placeholder="Supporting Text"
            :maxlength="dataRef.supporting_text_max_length ?? 500"
            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
        />
      </input-wrapper>
    </div>
    <VButton v-if="dataRef.hasOwnProperty('primary_button')" :button="dataRef.primary_button" :sites="sites" :forms="forms" :classes="'bg-gray-200'"/>
    <VButton v-if="dataRef.hasOwnProperty('secondary_button')" :button="dataRef.secondary_button" :sites="sites" :forms="forms" :classes="'bg-gray-200'"/>
    <div class="flex flex-col gap-4 bg-gray-200 rounded-xl px-6 py-5 mt-4"
         v-if="dataRef.hasOwnProperty('featured_image')">
      <card class="!p-0 !bg-gray-200" title="Featured Image"
            supporting_text="Recommended dimension: 1200*1060px">
        <VFileUpload
            name="image"
            class="!bg-gray-200"
            height="h-[395px]"
            v-model="dataRef.featured_image"
        />
      </card>
    </div>
    <div class="flex flex-col gap-4 bg-gray-200 rounded-xl px-6 py-5 mt-4"
         v-if="dataRef.hasOwnProperty('featured_image2')">
      <card class="!p-0 !bg-gray-200" title="Featured Image"
            supporting_text="Recommended dimension: 1200*1060px">
        <VFileUpload
            name="image"
            class="!bg-gray-200"
            height="h-[395px]"
            v-model="dataRef.featured_image2"
        />
      </card>
    </div>
  </div>
</template>
<script setup>
import {ref, inject} from "vue";
import {defaultProps} from "@/components/helpers/defaultProps";
import Card from "@/components/common/Card.vue";
import IconSelector from "@/components/common/IconSelector.vue";
import InputWrapper from "@/components/common/InputWrapper.vue";
import DefaultFileUpload from "@/components/common/FileUpload.vue";
import VButton from "@/components/common/Button.vue";
import QuillEditor from "@/components/common/QuillEditor.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 ?? props.data);
</script>
