<template>
  <div class="tw:flex tw:gap-4">
    <section class="tw:w-1/3 tw:p-4 tw:bg-slate-100 tw:rounded-lg">
      <header class="tw:font-semibold tw:text-lg tw:uppercase">Доступные блоки</header>
      <div class="tw:mb-6">Перетяните блок, чтобы добавить на главную страницу</div>

      <draggable
        v-model="availableBlocks"
        :group="{ name: 'blocks', pull: 'clone', put: false }"
        :clone="cloneBlock"
        item-key="type"
        class="tw:space-y-2"
        chosenClass="tw:scale-98"
      >
        <template #item="{ element, index }">
          <Card class="tw:cursor-move">
            <template #title>
              <i class="fa fa-arrows"></i>
              {{ element.title }}
            </template>
            <template #content>
              <p class="m-0">
                {{ element.description }}
              </p>
            </template>
          </Card>
        </template>
      </draggable>
    </section>

    <section class="tw:w-full tw:rounded-xl tw:p-4 tw:bg-slate-100 tw:min-h-[400px] tw:relative">
      <header class="tw:font-semibold tw:text-lg tw:uppercase">Блоки на главной странице</header>
      <div class="tw:mb-6">Эти блоки будут отображены на главной странице в том же порядке. Перетяните блок, если хотите изменить порядок.</div>

      <draggable
        v-model="settings.items.mainpage_blocks"
        :group="{ name: 'blocks', put: true }"
        item-key="type"
        class="tw:w-full tw:h-full tw:min-h-[400px] tw:space-y-2"
        @change="onChange"
      >
        <template #item="{ element, index }">
          <template v-if="blockToComponentMap[element.type]">
            <div class="tw:bg-white tw:rounded-lg tw:p-6 tw:border  tw:border-slate-200">
              <component
                :is="blockToComponentMap[element.type]"
                :value="element"
                @onRemove="removeBlock(index)"
                @onShowSettings="showDrawer(index)"
              />
            </div>
          </template>

          <div v-else>неподдерживаемый блок</div>
        </template>
      </draggable>

      <div
        v-if="!hasBlocks"
        class="tw:absolute tw:inset-0 tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-center tw:py-12 tw:px-4 tw:pointer-events-none"
      >
        <div class="tw:mb-6 tw:text-6xl tw:text-gray-400">
          <i class="fa fa-inbox"></i>
        </div>
        <h3 class="tw:text-xl tw:font-semibold tw:text-gray-700 tw:mb-2">
          Нет блоков на главной странице
        </h3>
        <p class="tw:text-gray-500 tw:max-w-md tw:mb-4">
          Перетащите блок из левой панели, чтобы добавить его на главную страницу
        </p>
      </div>
    </section>

    <Drawer
      :visible="isDrawerSettingsVisible"
      @update:visible="closeDrawer"
      :header="drawerTitle"
      position="right"
      :baseZIndex="1000"
      class="tw:!w-full tw:md:!w-80 tw:lg:!w-[50rem]"
    >
      <template v-if="currentBlock && blockToFormMap[currentBlock.type]">
        <component
          :is="blockToFormMap[currentBlock.type]"
          ref="currentBlockForm"
          @cancel="closeDrawer"
          :modelValue="settings.items.mainpage_blocks[drawerBlockIndex]"
          @update:modelValue="updateBlockData"
        />
      </template>

      <div v-else>Unsupported block type</div>
    </Drawer>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable';
import {Card, Drawer, useConfirm} from 'primevue';
import {computed, nextTick, ref} from "vue";
import {useSettingsStore} from "@/stores/settings.js";
import {
  blocks,
  blockToComponentMap,
  blockToFormMap
} from "@/components/MainPageConfigurator/availableBlocks.js";

const settings = useSettingsStore();
const confirm = useConfirm();
const availableBlocks = ref(blocks);

const isDrawerSettingsVisible = ref(null);
const drawerBlockIndex = ref(null);
const currentBlockForm = ref(null);

const currentBlock = computed(() => {
  if (drawerBlockIndex.value >= 0) {
    return settings.items.mainpage_blocks[drawerBlockIndex.value];
  }

  return null;
});

const drawerTitle = computed(() => {
  if (currentBlock.value) {
    return `Редактирование ${currentBlock?.value?.type} - ${currentBlock?.value?.title || 'Без заголовка'}`;
  }

  return '';
});

const hasBlocks = computed(() => {
  return settings.items.mainpage_blocks && settings.items.mainpage_blocks.length > 0;
});

function removeBlock(index) {
  settings.items.mainpage_blocks.splice(index, 1);
}

function cloneBlock(block) {
  const newBlock = JSON.parse(JSON.stringify(block));
  newBlock.title = '';
  newBlock.description = '';
  return newBlock;
}

function showDrawer(blockIndex) {
  if (currentBlock.value !== null) {
    drawerBlockIndex.value = blockIndex;
    isDrawerSettingsVisible.value = true;
  }
}

function closeDrawer() {
  // Проверяем, есть ли несохраненные изменения
  if (currentBlockForm.value?.isChanged === true) {
    confirm.require({
      message: 'У вас есть несохраненные изменения. Вы уверены, что хотите закрыть форму?',
      header: 'Подтверждение закрытия',
      icon: 'pi pi-exclamation-triangle',
      rejectProps: {
        label: 'Отмена',
        severity: 'secondary',
        outlined: true
      },
      acceptProps: {
        label: 'Закрыть',
        severity: 'danger'
      },
      accept: () => {
        drawerBlockIndex.value = null;
        isDrawerSettingsVisible.value = false;
      }
    });
  } else {
    drawerBlockIndex.value = null;
    isDrawerSettingsVisible.value = false;
  }
}

function onChange(update) {
  if (update.added && update.added?.newIndex >= 0) {
    showDrawer(update.added.newIndex);
  }
}

function updateBlockData(newBlockData) {
  if (drawerBlockIndex.value !== null && drawerBlockIndex.value >= 0) {
    settings.items.mainpage_blocks.splice(drawerBlockIndex.value, 1, newBlockData);
    nextTick(() => closeDrawer());
  }
}
</script>

<style scoped>

</style>
