<template>
  <ItemBool label="Статус" v-model="settings.items.app.app_enabled">
    Если выключено, покупатели в Telegram увидят сообщение, что магазин временно закрыт.
    Заказы и просмотр товаров будут недоступны.
  </ItemBool>

  <ItemInput label="Название приложения"
             v-model="settings.items.app.app_name"
             placeholder="Без названия"
  >
    Отображается в заголовке Telegram Mini App при запуске, а также используется как подпись
    под иконкой, если пользователь добавит приложение на главный экран своего устройства.
    Рекомендуется короткое и понятное название (до 20 символов).
    Если оставить пустым, то название выводиться не будет.
  </ItemInput>

  <ItemImage label="Иконка приложения" v-model="settings.items.app.app_icon">
    Изображение, которое будет отображаться в Telegram Mini App.
  </ItemImage>

  <ItemInput label="Политика конфиденциальности"
             v-model="settings.items.app.privacy_policy_link"
             placeholder="https://your-site/privacy-polisy"
  >
    Укажите ссылку на страницу с вашей Политикой конфиденциальности.
    Она будет показываться пользователям для получения согласия на обработку персональных данных.
    Вы сможете видеть, кто согласился, на странице с
    <RouterLink to="/customers">Telegram покупателями</RouterLink>
    .
  </ItemInput>

  <ItemSelect label="Светлая тема" v-model="settings.items.app.theme_light" :items="themes">
    Выберите стиль, который будет использоваться при отображении вашего магазина
    в Telegram для дневного режима.
    <a href="https://daisyui.com/docs/themes/#list-of-themes" target="_blank">
      Посмотреть как выглядят темы
    </a>
  </ItemSelect>

  <ItemSelect label="Тёмная тема" v-model="settings.items.app.theme_dark" :items="themes">
    Выберите стиль, который будет использоваться при отображении вашего магазина
    в Telegram для ночного режима.
    <a href="https://daisyui.com/docs/themes/#list-of-themes" target="_blank">
      Посмотреть как выглядят темы
    </a>
  </ItemSelect>

  <ItemBool label="Режим разработчика" v-model="settings.items.app.app_debug">
    Режим разработчика. Рекомендуется включать только по необходимости.
    В остальных случаях, для нормальной работы магазина, должен быть выключен.
  </ItemBool>

  <ItemSelect label="Соотношение сторон" v-model="settings.items.app.image_aspect_ratio" :items="aspectRatioOptions">
    Выберите соотношение сторон для изображений товаров. Это глобальная настройка, которая будет применяться ко всем изображениям в списках товаров: карусель товаров, лента товаров, результаты поиска.
  </ItemSelect>

  <ItemSelect label="Алгоритм обрезки" v-model="settings.items.app.image_crop_algorithm" :items="cropAlgorithmOptions">
    Выберите алгоритм обрезки изображений. Эта настройка применяется глобально ко всем изображениям в списках товаров (карусель товаров, лента товаров, результаты поиска):
    <ul class="tw:list-disc tw:ml-5 tw:mt-2">
      <li><strong>Cover</strong> - обрезает изображение, сохраняя пропорции, чтобы заполнить весь размер (может обрезать края)</li>
      <li><strong>Contain</strong> - вписывает изображение в размер, сохраняя пропорции (может добавить пустые поля)</li>
      <li><strong>Resize</strong> - изменяет размер изображения с сохранением пропорций (без обрезки)</li>
    </ul>
  </ItemSelect>

  <ItemBool label="Тактильная обратная связь (Haptic Feedback)" v-model="settings.items.app.haptic_enabled">
    Включить виброотклик при взаимодействии с элементами интерфейса. Если выключено, тактильная обратная связь не будет использоваться.
  </ItemBool>
</template>

<script setup>
import {useSettingsStore} from "@/stores/settings.js";
import ItemBool from "@/components/Settings/ItemBool.vue";
import ItemImage from "@/components/Settings/ItemImage.vue";
import ItemSelect from "@/components/Settings/ItemSelect.vue";
import ItemInput from "@/components/Settings/ItemInput.vue";

const settings = useSettingsStore();
const themes = JSON.parse(window.TeleCart.themes);

const aspectRatioOptions = {
  '1:1': '1:1 - Квадрат (универсально, аксессуары, мелкие товары)',
  '4:5': '4:5 - Вертикальное (одежда, обувь, вертикальные товары)',
  '3:4': '3:4 - Вертикальное (одежда, обувь, вертикальные товары)',
  '2:3': '2:3 - Высокое вертикальное (цветы, высокие предметы)',
};

const cropAlgorithmOptions = {
  'cover': 'Cover - Обрезать с сохранением пропорций',
  'contain': 'Contain - Вписать с сохранением пропорций',
  'resize': 'Resize - Изменить размер с сохранением пропорций',
};
</script>

<style scoped>

</style>
