<template>
  <div
      v-if="blocks.blocks?.length > 0"
      v-for="(block, index) in blocks.blocks"
  >
    <template v-if="blockTypeToComponentMap[block.type]">
      <component
          v-if="block.is_enabled"
          :is="blockTypeToComponentMap[block.type]"
          :block="block"
      />
    </template>

    <div v-else-if="blockTypeToComponentMap[block.type] === undefined">
      <div role="alert" class="alert alert-error mx-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>Unsupported Block Type: <span class="font-bold">{{ block.type }}</span></span>
      </div>
    </div>
  </div>

  <EmptyBlocks v-else/>
</template>

<script setup>
import SliderBlock from "@/components/MainPage/Blocks/SliderBlock.vue";
import CategoriesTopBlock from "@/components/MainPage/Blocks/CategoriesTopBlock.vue";
import {useBlocksStore} from "@/stores/BlocksStore.js";
import ErrorBlock from "@/components/MainPage/Blocks/ErrorBlock.vue";
import ProductsFeedBlock from "@/components/MainPage/Blocks/ProductsFeedBlock.vue";
import EmptyBlocks from "@/components/MainPage/EmptyBlocks.vue";
import ProductsCarouselBlock from "@/components/MainPage/Blocks/ProductsCarouselBlock.vue";

const blockTypeToComponentMap = {
  slider: SliderBlock,
  categories_top: CategoriesTopBlock,
  products_feed: ProductsFeedBlock,
  products_carousel: ProductsCarouselBlock,
  error: ErrorBlock,
};

const blocks = useBlocksStore();
</script>
