<template>
  <div class="create-collection">
    <div class="header">
      <router-link to="/collections" class="back-button">
        <span class="menu-icon">arrow_back</span>
      </router-link>
      <h1 class="title">Создать коллекцию</h1>
    </div>

    <div class="form">
      <input 
        type="text" 
        class="input-field" 
        placeholder="Название"
        v-model="collectionName"
      >

      <div class="icon-selector">
        <div class="selected-icon" @click="showIconPicker = true">
          <span class="menu-icon">{{ selectedIcon }}</span>
        </div>
        <button class="icon-button" @click="showIconPicker = true">
          Выбрать иконку
        </button>
      </div>

      <button 
        class="save-button"
        :disabled="!isValid"
        @click="saveCollection"
      >
        Сохранить
      </button>
    </div>

    <!-- Модальное окно выбора иконки -->
    <div v-if="showIconPicker" class="icon-picker-modal">
      <div class="icon-picker-header">
        <h2>Выбрать иконку</h2>
        <button class="cancel-button" @click="showIconPicker = false">Отмена</button>
      </div>
      <div class="icon-grid">
        <div 
          v-for="icon in availableIcons" 
          :key="icon"
          class="icon-option"
          @click="selectIcon(icon)"
        >
          <span class="menu-icon">{{ icon }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CreateCollection',
  data() {
    return {
      collectionName: '',
      selectedIcon: 'favorite',
      showIconPicker: false,
      availableIcons: [
        'favorite', 'book', 'check_circle', 'schedule', 
        'shower', 'local_cafe', 'explore', 'attach_money',
        'flash_on', 'sports_basketball', 'hearing', 'emoji_events',
        'fitness_center', 'star', 'theaters', 'whatshot',
        'science', 'spa', 'volunteer_activism', 'sentiment_satisfied',
        'sentiment_dissatisfied', 'school', 'vpn_key', 'lightbulb',
        'medical_services', 'nights_stay', 'music_note', 'child_friendly',
        'flight', 'rocket', 'ac_unit', 'toys',
        'wb_sunny', 'yin_yang', 'female', 'male'
      ]
    }
  },
  computed: {
    isValid() {
      return this.collectionName.trim().length > 0
    }
  },
  methods: {
    selectIcon(icon) {
      this.selectedIcon = icon
      this.showIconPicker = false
    },
    saveCollection() {
      if (!this.isValid) return

      const newCollection = {
        name: this.collectionName,
        icon: this.selectedIcon
      }
      
      const collections = JSON.parse(localStorage.getItem('collections') || '[]')
      collections.push(newCollection)
      localStorage.setItem('collections', JSON.stringify(collections))

      this.$router.push('/collections')
    }
  }
}
</script>

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

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

.back-button {
  color: #2196F3;
  text-decoration: none;
  margin-right: 32px;
}

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

.form {
  padding: 20px;
}

.input-field {
  width: 100%;
  background: #1F1F1F;
  border: none;
  border-radius: 8px;
  padding: 16px;
  color: white;
  font-size: 16px;
  margin-bottom: 20px;
}

.input-field::placeholder {
  color: #686868;
}

.icon-selector {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.selected-icon {
  width: 48px;
  height: 48px;
  background: #2196F3;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.icon-button {
  background: none;
  border: none;
  color: #2196F3;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
}

.save-button {
  width: 100%;
  background: #2196F3;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  padding: 16px;
  cursor: pointer;
}

.save-button:disabled {
  background: #1F1F1F;
  color: #686868;
  cursor: not-allowed;
}

.icon-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.icon-picker-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: #1F1F1F;
  border-bottom: 1px solid #686868;
}

.cancel-button {
  background: none;
  border: none;
  color: #2196F3;
  font-size: 16px;
  cursor: pointer;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
}

.icon-option {
  width: 48px;
  height: 48px;
  background: #2196F3;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

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