<template>
  <div :class="{ '-open': isOpen }" class="v-modal">
    <transition name="fade">
      <div
          class="relative min-w-[480px] flex-col rounded-xl border-tertiary-500 bg-gray-200"
          v-if="isOpen"
      >
        <div class="p-6 flex justify-between flex-col">
          <div class="flex justify-between mb-[20px]">
            <div>
              <p class="text-gray-900 font-semibold text-lg pb-1">Select module</p>
              <p class="text-sm font-normal text-gray-600">Click to add module to page</p>
            </div>
            <CloseIcon class="w-6 h-6 text-gray-400 hover:bg-gray-100 rounded-md cursor-pointer" @click="close"></CloseIcon>
          </div>
          <div class="grid grid-cols-2 gap-2 overflow-y-auto max-h-[800px]">
            <div
                @click="add(moduleName)"
                v-for="(s, moduleName) in modules"
                class="flex flex-col p-4 justify-center items-center bg-white rounded-lg hover:text-white hover:bg-brand-600 cursor-pointer"
                :class="{'!bg-gray-100 !cursor-not-allowed hover:!text-gray-600 !text-gray-600': disabledModules.includes(moduleName)}"
            >
              <PlusIcon class="h-5 w-5"></PlusIcon>
              <p class="text-sm font-semibold">{{ moduleName }}</p>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import PlusIcon from "@/assets/img/icons/plus.svg";
import CloseIcon from "@/assets/img/icons/x-close.svg";
import {ref} from "vue";

const emit = defineEmits(["addModule"]);

defineProps({
  modules: {
    type: String,
    required: true,
  },
});

const disabledModules = ['Collection carousel', 'Horizontal Tabs', 'News grid', 'Collection grid'];

const isOpen = ref(false);
const open = () => {
  isOpen.value = true;
};

const close = () => {
  isOpen.value = false;
};

const add = (module: string, styles = {}) => {
  if (disabledModules.includes(module)) {
    return;
  }

  emit("addModule", module, styles);
};

defineExpose({
  open,
  close,
});

</script>

<style scoped>
.v-modal {
  position: fixed;
  right: 24px;
  z-index: 50;
  background-color: transparent;
  transition: background-color 0.3s linear;

  &.-open {
    pointer-events: all;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease; /* increase duration here (2s) */
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    transform: translateY(-8px);
  }
  .fade-enter-to,
  .fade-leave-from {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>