<template>
  <div v-if="draft">
    <BaseForm
      v-model="draft"
      :isChanged="isChanged"
      @onApply="onApply"
      @cancel="$emit('cancel')"
    >
      <!-- Основные настройки -->
      <Panel header="Основные настройки" class="tw:mb-4">
        <div class="tw:space-y-6">
          <!-- Эффект смены слайдов -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Эффект смены слайдов
              </label>
              <Dropdown
                v-model="draft.data.effect"
                :options="effectOptionsList"
                optionLabel="label"
                optionValue="value"
                placeholder="Выберите эффект"
                class="tw:w-64"
              />
            </div>
          </div>

          <!-- Пагинация -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Пагинация
              </label>
              <ToggleSwitch v-model="draft.data.pagination"/>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Показывать точки под слайдером для индикации текущего слайда.
            </small>
          </div>

          <!-- Полоса прокрутки -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Полоса прокрутки
              </label>
              <ToggleSwitch v-model="draft.data.scrollbar"/>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Показывать полосу прокрутки под слайдером для навигации между слайдами.
            </small>
          </div>

          <!-- Расстояние между слайдами -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
              <label class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
                Расстояние между слайдами
              </label>
              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
                <InputNumber
                  v-model="draft.data.space_between"
                  :min="0"
                  :max="100"
                  placeholder="30"
                  :showButtons="true"
                />
                <span class="tw:text-gray-600 tw:whitespace-nowrap">px</span>
              </div>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Расстояние между слайдами в пикселях. По умолчанию - 30.
            </small>
          </div>

          <!-- Свободный режим -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Свободный режим
              </label>
              <ToggleSwitch v-model="draft.data.free_mode"/>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
            </small>
          </div>

          <!-- Бесконечная прокрутка -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Бесконечная прокрутка
              </label>
              <ToggleSwitch v-model="draft.data.loop"/>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с
              первого, создавая бесконечный цикл.
            </small>
          </div>

          <!-- Автоматическая прокрутка -->
          <div>
            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Автоматическая прокрутка
              </label>
              <ToggleSwitch v-model="draft.data.autoplay"/>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Слайдер будет автоматически листать изображения каждые 3 секунды.
            </small>
          </div>
        </div>
      </Panel>

      <!-- Слайды -->
      <Panel header="Слайды">
        <template #icons>
          <Button
            severity="success"
            text
            rounded
            aria-label="Добавить слайд"
            @click="addSlide"
          >
            <i class="fa fa-plus"></i> Добавить новый слайд
          </Button>
        </template>

        <div v-if="draft.data.slides.length === 0" class="tw:text-center tw:py-8 tw:text-gray-500">
          <i class="fa fa-image fa-3x tw:mb-4"></i>
          <p class="tw:font-bold">Слайды не добавлены</p>
          <Button
            label="Добавить первый слайд"
            severity="success"
            outlined
            class="tw:mt-4"
            @click="addSlide"
          >
            <i class="fa fa-plus"></i>
          </Button>
        </div>

        <div v-else class="tw:space-y-4">
          <div
            v-for="(slide, index) in draft.data.slides"
            :key="index"
            class="tw:bg-white tw:rounded-lg tw:border tw:border-gray-200 tw:p-4 tw:shadow-sm tw:relative"
          >
            <div class="tw:absolute tw:top-2 tw:right-2">
              <Button
                severity="danger"
                text
                rounded
                aria-label="Удалить слайд"
                @click="removeSlide($event, index)"

              >
                <i class="fa fa-trash tw:text-lg"></i>
              </Button>
            </div>

            <div class="tw:flex">
              <!-- Изображение -->
              <div class="tw:mr-5">
                <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
                  Изображение
                </label>
                <OcImagePicker v-model="slide.image"/>
              </div>

              <!-- Поля -->
              <div class="tw:space-y-4">
                <div>
                  <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
                    Заголовок слайда
                  </label>
                  <InputText
                    v-model="slide.title"
                    placeholder="Введите заголовок слайда"
                    class="tw:w-full"
                  />
                  <small class="tw:block tw:text-sm tw:text-gray-500">
                    Заголовок слайда будет отправляться в цели Яндекс.Метрики
                  </small>
                </div>

                <div>
                  <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
                    Ссылка
                  </label>
                  <LinkSelector v-model="slide.link"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Panel>
    </BaseForm>
  </div>
</template>

<script setup>
import {computed, defineExpose, onMounted, ref} from "vue";
import OcImagePicker from "@/components/OcImagePicker.vue";
import LinkSelector from "@/components/Slider/LinkSelector.vue";
import {Button, Dropdown, InputNumber, InputText, Panel, ToggleSwitch, useConfirm} from 'primevue';
import {sliderEffectOptions} from "@/utils/constants..js";
import {md5} from "js-md5";
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";

const confirm = useConfirm();

const draft = ref(null);
const slider = defineModel();

const isChanged = computed(() => md5(JSON.stringify(slider.value)) !== md5(JSON.stringify(draft.value)));

const effectOptionsList = computed(() => {
  return Object.entries(sliderEffectOptions).map(([value, label]) => ({
    value,
    label,
  }));
});

function removeSlide(event, index) {
  confirm.require({
    group: 'popup',
    target: event.currentTarget,
    message: 'Удалить слайд?',
    icon: 'pi pi-exclamation-triangle',
    rejectProps: {
      label: 'Отмена',
      severity: 'secondary',
      outlined: true
    },
    acceptProps: {
      label: 'Удалить',
      severity: 'danger'
    },
    accept: () => draft.value.data.slides.splice(index, 1),
  });
}

function addSlide() {
  draft.value.data.slides.push({
    title: '',
    link: {
      type: 'none',
      value: null,
    },
    image: '',
  });
}

function onApply() {
  slider.value = JSON.parse(JSON.stringify(draft.value));
}

onMounted(() => {
  draft.value = JSON.parse(JSON.stringify(slider.value));
});

defineExpose({isChanged});
</script>

<style scoped>
</style>
