<template>
  <div class="collections">
    <div class="header">
      <h1 class="title">Коллекции</h1>
      <router-link to="/collections/create" class="add-button">
        <span class="menu-icon">add</span>
      </router-link>
    </div>

    <div class="collections-list">
      <div class="collection-item static">
        <div class="collection-icon blue">
          <span class="menu-icon">favorite</span>
        </div>
        <span class="collection-name">Избранное</span>
        <span class="menu-icon arrow">chevron_right</span>
      </div>

      <div class="collection-item static">
        <div class="collection-icon blue">
          <span class="menu-icon">schedule</span>
        </div>
        <span class="collection-name">Когда-нибудь</span>
        <span class="menu-icon arrow">chevron_right</span>
      </div>

      <div class="collection-item static">
        <div class="collection-icon blue">
          <span class="menu-icon">flight</span>
        </div>
        <span class="collection-name">В поездку</span>
        <span class="menu-icon arrow">chevron_right</span>
      </div>

      <div 
        v-for="collection in userCollections" 
        :key="collection.id"
        class="collection-item"
      >
        <div 
          class="collection-wrapper"
          @touchstart="touchStart($event, collection.id)"
          @touchmove="touchMove($event, collection.id)"
          @touchend="touchEnd(collection.id)"
          :style="{ transform: `translateX(${swipeOffset[collection.id] || 0}px)` }"
        >
          <div class="collection-content">
            <div class="collection-icon blue">
              <span class="menu-icon">{{ collection.icon }}</span>
            </div>
            <span class="collection-name">{{ collection.name }}</span>
            <span class="menu-icon arrow">chevron_right</span>
          </div>
          <div class="delete-background">
            <span class="menu-icon">delete</span>
            <span class="delete-text">Удалить</span>
          </div>
        </div>
      </div>
    </div>

    <BottomNav />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import BottomNav from '@/components/BottomNav.vue'

const userCollections = ref([])
const swipeOffset = ref({})
const touchStartX = ref(0)
const deleteThreshold = -100 // Увеличиваем порог для удаления

const loadCollections = () => {
  const collections = JSON.parse(localStorage.getItem('collections') || '[]')
  userCollections.value = collections
}

const touchStart = (event, id) => {
  touchStartX.value = event.touches[0].clientX
  swipeOffset.value[id] = swipeOffset.value[id] || 0
}

const touchMove = (event, id) => {
  const currentX = event.touches[0].clientX
  const diff = currentX - touchStartX.value
  const newOffset = Math.min(0, Math.max(diff, -120)) // Увеличиваем максимальный свайп
  swipeOffset.value[id] = newOffset
}

const touchEnd = (id) => {
  if (swipeOffset.value[id] < deleteThreshold) {
    // Если свайп достаточно длинный - удаляем коллекцию
    deleteCollection(id)
  } else {
    // Возвращаем элемент на место
    swipeOffset.value[id] = 0
  }
}

const deleteCollection = (id) => {
  // Удаляем коллекцию из localStorage
  const collections = JSON.parse(localStorage.getItem('collections') || '[]')
  const updatedCollections = collections.filter(c => c.id !== id)
  localStorage.setItem('collections', JSON.stringify(updatedCollections))

  // Обновляем список коллекций
  userCollections.value = updatedCollections

  // Сбрасываем смещение свайпа
  delete swipeOffset.value[id]
}

onMounted(() => {
  loadCollections()
})
</script>

<style scoped>
.collections {
  min-height: 100vh;
  background-color: #000000;
  color: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #1F1F1F;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.add-button {
  color: #2196F3;
  text-decoration: none;
}

.collections-list {
  padding: 0 20px;
}

.collection-item {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #1F1F1F;
}

.collection-item.static {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.collection-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  background: #000000;
  transition: transform 0.3s ease;
  border-bottom: 1px solid #1F1F1F;
}

.delete-background {
  position: absolute;
  right: -120px; /* Должно быть равно максимальному свайпу */
  top: 0;
  bottom: 0;
  width: 120px;
  background-color: #FF3B30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.delete-text {
  font-size: 12px;
  margin-top: 4px;
}

.collection-content {
  display: flex;
  align-items: center;
  padding: 16px 0;
  width: 100%;
  background: #000000;
}

.collection-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.blue {
  background-color: #2196F3;
}

.collection-name {
  flex: 1;
  font-size: 16px;
}

.menu-icon {
  font-family: 'Material Icons';
  font-size: 24px;
}

.arrow {
  color: #686868;
  margin-left: 16px;
}
</style> 