<template>
  <div class="rounded-xl bg-gray-50 px-6 py-5">
    <div class="flex justify-between pb-2">
      <p class="text-lg font-semibold text-gray-900">
        {{ dataRef.name }}
      </p>
    </div>
    <div class="flex flex-col gap-4">
      <div class="text-gray-600 border-b border-gray-200 pb-4 text-sm" v-if="dataRef.hasOwnProperty('supportive_text')">
        {{ dataRef.supportive_text }}
      </div>
      <div class="flex flex-col gap-3">
        <div class="flex justify-between">
          <div class="flex flex-col gap-1">
            <div class="font-semibold text-gray-900">{{ parseName(type) }}</div>
            <div class="text-sm text-gray-600">This {{ singularize(type) }} can contain up to {{ dataRef.max_items }} {{ parseName(type, false) }}</div>
          </div>
          <div>
            <button
                :disabled="dataRef.data.length >=  dataRef.max_items"
                @click="addItem"
                type="button"
                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': dataRef.data.length >= dataRef.max_items }"
            >
              <PlusIcon class="h-5 w-5"></PlusIcon>
              <span>Add</span>
            </button>
          </div>
        </div>
        <div class="flex flex-col gap-3">
          <div v-for="(item, index) in dataRef.data"
               class="flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg"
               :class="{'bg-gray-200 hover:bg-gray-200': openItemStates[index]}">
            <div class="flex flex-1 items-center justify-between relative" @click="toggleItem(index);">
              <div class="flex flex-1 flex-col cursor-pointer" @click="edit(item, index)">
                <div class="text-xs text-gray-600">
                  {{ singularize(parseName(type))  }} #{{ index + 1 }}
                </div>
                <div class="text-sm font-medium text-gray-900">
                  {{ item.title }}
                </div>
              </div>
              <ActionMenu @removeItem="handleDeleteItem(index)" :enable-edit="true" @editItem="edit(item, index)"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <VModal ref="modalRef" :entity="singularize(type)" :callback="deleteCallback"></VModal>
</template>
<script setup>
import {ref} from "vue";
import PlusIcon from "@/assets/img/icons/plus.svg";
import { defaultProps } from "@/components/helpers/defaultProps";
import { singularize, parseName } from "@/components/helpers/common";
import { createItem } from "@/components/helpers/pageBuilderFactory";
import ActionMenu from "@/components/common/ActionMenu.vue";
import VModal from "@/components/common/Modal.vue";

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

const dataRef = ref(props.data.component);
const type = dataRef.value.type;
const modalRef = ref(null);

const key = `${type.value}-openItemStates`;
const openItemStates = ref(JSON.parse(window.localStorage.getItem(key)));
if (!openItemStates.value) {
  openItemStates.value = {};

  dataRef.value.data.forEach((item, index) => {
    openItemStates.value[index] = false;
  });

  window.localStorage.setItem(key, JSON.stringify(openItemStates.value));
}

const toggleItem = (index) => {
  Object.keys(openItemStates.value).forEach((key) => {
    openItemStates.value[key] = false;
  });
  openItemStates.value[index] = !openItemStates.value[index];
  window.localStorage.setItem(key, JSON.stringify(openItemStates.value));
};

const addItem = () => {
  dataRef.value.data.push(createItem({}, type === 'sliders', type === 'timeline_items'));
  emit("update", false);
};

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

const deleteCallback = (index) => {
  dataRef.value.data.splice(index, 1);
  emit("update", false);
};

const edit = (item, index) => {
  if (item.hasOwnProperty('edit_url')) {
    window.location.href = item.edit_url;
  }

  window.location.href = `/admin/pages/${props?.data?.page?.id}/sections/${props?.data?.sectionIndex}/components/${props?.data?.componentIndex}/items/${index}`;
};
</script>
