<template>
  <Dialog :visible="show" modal :header="isEditing ? 'Edit Category' : 'Create New Category'" :closable="false"
          class="!w-1/3">
    <div class="flex justify-center gap-4">
      <Button rounded outlined @click="toggleEmojiPicker" class=" flex justify-center !rounded-full !text-4xl !p-4"
              size="large" :label="icon"/>
    </div>

    <div
        class="absolute pt-1 border rounded-lg shadow-2xl border-gray-300 bg-white grid grid-cols-6 gap-4 h-40 z-50 ml-3 mt-1 overflow-scroll"
        v-if="showEmojiPicker">
      <Button v-for="emoji in emojis" class="!p-4" @click="selectEmoji(emoji)" :label="emoji" text/>
    </div>

    <!-- SelectButton для выбора типа категории -->
    <div class="flex justify-center mt-4">
      <SelectButton v-model="categoryType" :options="categoryTypes" optionLabel="name" />
    </div>

    <!-- Поля для создания/редактирования категории -->
    <label for="newCategoryName">Category Name:</label>
    <input v-model="name" type="text" id="newCategoryName"/>

    <label for="newCategoryDesc">Category Description:</label>
    <input v-model="description" type="text" id="newCategoryDesc"/>

    <!-- Кнопки -->
    <div class="button-group">
      <button @click="saveCategory" class="create-category-btn">{{ isEditing ? 'Save' : 'Create' }}</button>
      <button @click="closeModal" class="close-modal-btn">Cancel</button>
    </div>
  </Dialog>
</template>

<script lang="ts">
import {ref, watch, computed,  PropType} from 'vue';
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import SelectButton from "primevue/selectbutton";
import {Category, CategoryType} from '@/models/Category';

export default {
  components: {
    Dialog,
    Button, SelectButton
  },
  props: {
    show: Boolean,
    categoryTypes: Object as PropType<CategoryType[]>,
    category: Object as PropType<Category | null>, // Категория для редактирования (null, если создание)
  },
  emits: ['saveCategory', 'close-modal'],
  setup(props, {emit}) {
    const icon = ref('🐱');
    const name = ref('');
    const description = ref('');
    const showEmojiPicker = ref(false);
    const categoryType = ref(props.category?.type || props.categoryTypes[0]); // Тип по умолчанию
    const isEditing = computed(() => !!props.category); // Если есть категория, значит редактирование


    // Если мы редактируем категорию, заполняем поля данными
    watch(() => props.category, (newCategory) => {
      if (newCategory) {
        name.value = newCategory.name;
        description.value = newCategory.description;
        icon.value = newCategory.icon;
        categoryType.value = newCategory.type;
      } else {
        resetForm(); // Сбрасываем форму, если не редактируем
      }
    });

    const emojis = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '😍', '🥰', '😘'];

    const toggleEmojiPicker = () => {
      showEmojiPicker.value = !showEmojiPicker.value;
    };

    const selectEmoji = (emoji: string) => {
      icon.value = emoji;
      showEmojiPicker.value = false;
    };

    const saveCategory = () => {
      const categoryData = new Category(categoryType.value, name.value, description.value, icon.value);
      if (isEditing.value && props.category) {
        categoryData.id = props.category.id; // Сохраняем ID при редактировании
      }
      emit('saveCategory', categoryData);
      resetForm();
      closeModal();
    };

    const closeModal = () => {
      emit('close-modal');
      resetForm();
    };

    const resetForm = () => {
      name.value = '';
      description.value = '';
      icon.value = '🐱';
      categoryType.value = 'EXPENSE';
      showEmojiPicker.value = false;
    };


    return {
      icon,
      name,
      description,
      showEmojiPicker,
      categoryType,
      emojis,
      toggleEmojiPicker,
      selectEmoji,
      saveCategory,
      closeModal,
      isEditing
    };
  }
};
</script>

<style scoped>
label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.create-category-btn {
  background-color: #1abc9c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.create-category-btn:hover {
  background-color: #16a085;
}

.close-modal-btn {
  background-color: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.close-modal-btn:hover {
  background-color: #c0392b;
}
</style>
