<template>
  <div class="rounded-xl bg-gray-50 px-6 py-5">
    <div class="flex justify-between pb-2">
      <div class="flex justify-between w-full py-1">
        <div>
          <p class="text-lg font-semibold text-gray-900">
            {{ componentData.name }}
          </p>
          <p class="text-sm text-gray-600 mt-1">
            This section can contain up to {{ componentData.max_items }} videos
          </p>
        </div>
        <div>
          <a
              @click="addItem"
              class="text-sm cursor-pointer flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-500 px-3.5 py-2 font-semibold text-white hover:bg-brand-600"
              :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': componentData.data?.length >= componentData.max_items }"
          >
            <PlusIcon class="h-5 w-5"></PlusIcon>
            <span>Add</span>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-3">
      <div
          v-for="(item, index) in componentData.data"
          class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
          :key="index"
          :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
      >
        <div class="flex items-center justify-between">
          <div class="text-lg font-semibold text-gray-900">
            Video #{{ index + 1 }}
          </div>
          <div class="relative flex items-end">
            <ActionMenu @removeItem="handleDeleteItem(index)"/>
          </div>
        </div>
        <InputWrapper
            is-vertical
            field="line.title"
            label-text="Youtube URL"
            class="w-full"
            :value="item.youtube_url"
        >
          <input
              v-model="item.youtube_url"
              name="youtube_url.youtube_url"
              type="text"
              placeholder="Url"
              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
          />
        </InputWrapper>
        <p>OR</p>
        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-1.5">
            <VFileUpload
                name="image"
                type="video"
                height="h-[250px]"
                v-model="item.video"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
</template>
<script setup>
import {ref, inject} from "vue";
import PlusIcon from "@/assets/img/icons/plus.svg";
import {defaultProps} from "@/components/helpers/defaultProps";
import ActionMenu from "@/components/common/ActionMenu.vue";
import VModal from "@/components/common/Modal.vue";
import DefaultFileUpload from "@/components/common/FileUpload.vue";
import InputWrapper from "@/components/common/InputWrapper.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 componentData = ref(props.data.component);
const modalRef = ref(null);
const lastItemRef = ref(null);
const deleteItemIndex = ref(null);

function addItem() {
  if (!componentData.value.hasOwnProperty('data')) {
    componentData.value.data = [];
  }

  if (componentData.value.data?.length >= componentData.value.max_items) {
    return;
  }
  componentData.value.data?.push({
    video: null,
  });

  emit("update", false);
}

const handleDeleteItem = (index) => {
  deleteItemIndex.value = index;
  modalRef?.value?.open(index);
}

const deleteCallback = (index) => {
  componentData.value.data?.splice(index, 1);
  emit("update", false);
};
</script>