<template>
  <div v-if="draft">
    <BaseForm
        v-model="draft"
        :isChanged="isChanged"
        @onApply="onApply"
        @cancel="$emit('cancel')"
    >
      <template #default>
        <div class="tw:space-y-6">
          <Panel header="Основные настройки">
            <div class="tw:space-y-6">
              <!-- Категория -->
              <FormItem label="Категория">
                <template #default>
                  <CategorySelect
                      v-model="draft.data.category_id"
                      placeholder="Выберите категорию"
                  />
                </template>
                <template #help>
                  Категория из которой выводить товары для карусели.
                </template>
              </FormItem>

              <!-- Текст кнопки просмотра категории -->
              <FormItem label="Текст на кнопке">
                <template #default>
                  <InputText
                      v-model="draft.data.all_text"
                      placeholder="Смотреть всё"
                      class="tw:w-full"
                  />
                </template>
                <template #help>
                  Текст для кнопки, которая открывает просмотр товаров у категории
                </template>
              </FormItem>

            </div>
          </Panel>

          <Panel header="Настройки карусели">
            <div class="tw:space-y-6">
              <!-- Количество товаров в карусели -->
              <FormItem label="Количество товаров в карусели">
                <template #default>
                  <InputNumber
                      v-model="slidesPerView"
                      :min="2"
                      :max="5"
                      :step="0.5"
                      placeholder="2.5"
                      :showButtons="true"
                  />
                  <span class="tw:text-gray-600 tw:whitespace-nowrap">шт.</span>
                </template>

                <template #help>
                  Введите количество товаров, которые должны отображаться одновременно в карусели (от 2 до 5).
                  Можно использовать дробные значения, чтобы часть следующего товара была видна.
                </template>
              </FormItem>

              <!-- Расстояние между товарами -->
              <FormItem label="Расстояние между товарами">
                <template #default>
                  <InputNumber
                      v-model="spaceBetween"
                      :min="0"
                      :max="100"
                      placeholder="20"
                      :step="5"
                      :showButtons="true"
                  />
                  <span class="tw:text-gray-600 tw:whitespace-nowrap">px</span>
                </template>

                <template #help>
                  Задайте промежуток между товарами в карусели в пикселях, чтобы слайды не сливались и выглядели
                  аккуратно.
                </template>
              </FormItem>

              <!-- Режим Авто -->
              <FormItem label="Автоматическая прокрутка">
                <template #default>
                  <ToggleSwitch
                      v-model="isAutoplayEnabled"
                  />
                </template>
                <template #help>
                  Включите автоматическую прокрутку карусели с заданной задержкой между переходами.
                </template>
              </FormItem>

              <!-- Задержка -->
              <FormItem v-if="isAutoplayEnabled" label="Задержка">
                <template #default>
                  <InputNumber
                      v-model="autoplayDelay"
                      :min="1000"
                      :max="10000"
                      placeholder="3000"
                      :step="1000"
                      :showButtons="true"
                  />
                  <span class="tw:text-gray-600 tw:whitespace-nowrap">мс</span>
                </template>
                <template #help>
                  Задержка между переходами в миллисекундах. Минимум 1000, максимум 10000.
                </template>
              </FormItem>

              <!-- Свободный режим -->
              <FormItem label="Свободный режим">
                <template #default>
                  <ToggleSwitch v-model="freeMode"/>
                </template>
                <template #help>
                  Включает «свободный режим» прокрутки слайдов без привязки к конкретным индексам.
                  Слайды прокручиваются плавно, скорость зависит от инерции свайпа.
                </template>
              </FormItem>
            </div>
          </Panel>
        </div>
      </template>
    </BaseForm>
  </div>
</template>

<script setup>
import {computed, defineExpose, onMounted, ref} from "vue";
import {md5} from "js-md5";
import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
import CategorySelect from "@/components/Form/CategorySelect.vue";
import {Fieldset, InputNumber, InputText, Panel, ToggleSwitch} from "primevue";

const draft = ref(null);
const model = defineModel();
const emit = defineEmits(['cancel']);

const isChanged = computed(() => {
  return md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value));
});

// Инициализация carousel, если его нет (только для записи)
function ensureCarousel() {
  if (!draft.value.data.carousel) {
    draft.value.data.carousel = {};
  }
}

// Безопасное чтение значения из carousel
function getCarouselValue(key, defaultValue) {
  return draft.value.data.carousel?.[key] ?? defaultValue;
}

// Computed для управления slides_per_view
const slidesPerView = computed({
  get() {
    return getCarouselValue('slides_per_view', 2.5);
  },
  set(value) {
    ensureCarousel();
    draft.value.data.carousel.slides_per_view = value;
  }
});

// Computed для управления space_between
const spaceBetween = computed({
  get() {
    return getCarouselValue('space_between', 20);
  },
  set(value) {
    ensureCarousel();
    draft.value.data.carousel.space_between = value;
  }
});

// Computed для управления autoplay (включен/выключен)
const isAutoplayEnabled = computed({
  get() {
    const autoplay = draft.value.data.carousel?.autoplay;
    return autoplay !== false && autoplay !== null && autoplay !== undefined;
  },
  set(value) {
    ensureCarousel();
    if (value) {
      // Если включаем, создаем объект с delay (используем текущее значение или 3000 по умолчанию)
      const currentDelay = draft.value.data.carousel.autoplay?.delay || 3000;
      draft.value.data.carousel.autoplay = { delay: currentDelay };
    } else {
      // Если выключаем, устанавливаем false
      draft.value.data.carousel.autoplay = false;
    }
  }
});

// Computed для управления delay
const autoplayDelay = computed({
  get() {
    const autoplay = draft.value.data.carousel?.autoplay;
    if (autoplay && typeof autoplay === 'object' && autoplay.delay) {
      return autoplay.delay;
    }
    return 3000; // Значение по умолчанию
  },
  set(value) {
    ensureCarousel();
    // Убеждаемся, что autoplay - это объект
    if (!draft.value.data.carousel.autoplay || draft.value.data.carousel.autoplay === false) {
      draft.value.data.carousel.autoplay = { delay: value };
    } else {
      draft.value.data.carousel.autoplay.delay = value;
    }
  }
});

const freeMode = computed({
  get() {
    const freemode = draft.value.data.carousel?.freemode;
    if (freemode && typeof freemode === 'object' && freemode.enabled) {
      return freemode.enabled;
    }
    return false;
  },
  set(value) {
    ensureCarousel();
    // Убеждаемся, что autoplay - это объект
    if (!draft.value.data.carousel.freemode) {
      draft.value.data.carousel.freemode = {};
      draft.value.data.carousel.freemode.enabled = value;
    } else {
      draft.value.data.carousel.freemode.enabled = value;
    }
  }
});

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

onMounted(async () => {
  draft.value = JSON.parse(JSON.stringify(model.value));

  // Не создаем carousel здесь, чтобы не изменять draft при инициализации
  // carousel будет создан только при реальных изменениях пользователем
});

defineExpose({isChanged});
</script>
