<template>
  <Tabs value="0">
    <TabList>
      <Tab value="0">Настройки блока</Tab>
      <Tab value="1">Основные настройки</Tab>
      <slot name="tabs"></slot>
    </TabList>
    <TabPanels>
      <TabPanel value="0">
        <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>
              <ToggleSwitch v-model="model.is_enabled"/>
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Показывать этот блок
            </small>
          </div>

          <!-- Заголовок блока -->
          <div>
            <div class="tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Заголовок блока
              </label>

              <InputText
                v-model="model.title"
                placeholder="заголовок блока"
                class="tw:w-full"
              />
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Текст, который будет выводиться в качестве заголовка блока на главной странице. Оставьте
              пустым, если заголовок не требуется.
            </small>
          </div>

          <!-- Описание блока -->
          <div>
            <div class="tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Описание блока
              </label>

              <InputText
                v-model="model.description"
                placeholder="Описание блока"
                class="tw:w-full"
              />
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Описание выводится под заголовком блока уменьшенным шрифтом. Оставьте пустым, если
              описание не требуется.
            </small>
          </div>

          <!-- Цель Яндекс.Метрики -->
          <div>
            <div class="tw:mb-2">
              <label class="tw:font-medium tw:text-gray-700">
                Цель Яндекс.Метрики
              </label>

              <InputText
                v-model="model.goal_name"
                placeholder="Название цели для Яндекс.Метрики"
                class="tw:w-full"
              />
            </div>
            <small class="tw:block tw:text-sm tw:text-gray-500">
              Цель в Яндекс.Метрике для отслеживания кликов по блоку.
              Оставьте пустым, если не нужно отслеживать клики по этому блоку.
            </small>
          </div>
        </div>
      </TabPanel>
      <TabPanel value="1">
        <slot></slot>
      </TabPanel>
      <slot name="panels"></slot>
    </TabPanels>
  </Tabs>

  <Divider/>

  <div class="tw:flex tw:items-center tw:justify-between tw:gap-4">
    <div class="tw:flex tw:gap-2">
      <Button
        label="Применить"
        icon="fa fa-check"
        v-tooltip.top="isChanged ? 'Применить изменения' : 'Нет изменений для сохранения'"
        :disabled="isChanged === false"
        @click="onApply"
      />
      <Button label="Отмена" severity="secondary" @click="$emit('cancel')"/>
    </div>
    <div v-if="isChanged" class="tw:flex tw:items-center tw:gap-2 tw:text-amber-600">
      <i class="fa fa-exclamation-triangle"></i>
      <span class="tw:text-sm">Есть несохранённые изменения</span>
    </div>
  </div>
</template>

<script setup>
import {Button, Divider, InputText, Panel, ToggleSwitch} from 'primevue';
import Tabs from 'primevue/tabs';
import TabList from 'primevue/tablist';
import Tab from 'primevue/tab';
import TabPanels from 'primevue/tabpanels';
import TabPanel from 'primevue/tabpanel';


const model = defineModel();
const emit = defineEmits(['onApply', 'cancel']);
const props = defineProps({
  isChanged: {
    type: Boolean,
    default: false,
  }
});

function onApply() {
  emit('onApply');
}
</script>
