<script setup lang="ts">
import Button from "primevue/button";
import Select from "primevue/select";
import InputNumber from "primevue/inputnumber";

import {Category} from "@/models/Category";
import {ref} from "vue";
import {formatAmount} from "@/utils/utils";

const props = defineProps({
  category: {
    type: Object as Category,
    require: true
  },
  budgetId: {
    type: Number,
    require: true
  }
})

const emits = defineEmits(['category-updated'])

const isEditing = ref(false);
const startEditing = (a) => {
  isEditing.value = true;
  console.log(a)
}

const stopEditing = () => {
  isEditing.value = false;

  emits('category-updated', editedCategory.value);

}
const selectedCategorySettingType = ref(props.category.categorySetting.type)

const categorySettingTypes = ref([
  {
    code: 'CONST',
    name: 'По значению'
  },
  {
    code: 'AVG',
    name: 'По среднему'
  },
  {
    code: 'PERCENT',
    name: 'По проценту'
  },
  {
    code: 'LIMIT',
    name: 'По лимиту'
  }
])
const categoryAmount = ref(1000)

const editedCategory = ref(props.category);
</script>

<template>

  <div class="p-2 shadow-lg rounded-lg bg-white flex justify-between ">

    <div :class="isEditing ? 'w-1/5': ''" class="min-w-1 w-4/6">
      <h4 class="text-lg line-clamp-1">{{ editedCategory.category.name }}</h4>
      <p class="text-sm text-gray-500 line-clamp-1 min-w-1 ">{{ editedCategory.category.description }}</p>
    </div>
    <div class="flex flex-row gap-2 justify-end w-fit ">

      <Select v-if="isEditing" v-model="editedCategory.categorySetting.type" :options="categorySettingTypes"
              optionLabel="name"
              class="line-clamp-1   w-fit"/>
      <!-- Сумма, которая становится редактируемой при клике -->
      <button v-if="!isEditing" @click="startEditing"
              class="text-lg font-bold cursor-pointer w-full line-clamp-1">
        <p class="line-clamp-1 w-fit">{{ formatAmount(editedCategory.categorySetting.value) }} ₽</p>
      </button>
      <!--      @blur="stopEditing('unplannedCategories')" @keyup.enter="stopEditing('unplannedCategories')"&ndash;&gt;-->

      <InputNumber v-else ref="inputRefs" type="text" v-model="editedCategory.categorySetting.settingValue"
                   :disabled=" editedCategory.categorySetting.type.code == 'PERCENT' ? false : editedCategory.categorySetting.type.code == 'LIMIT' ? true : editedCategory.categorySetting.type.code == 'AVG' "
                   :class="editedCategory.categorySetting.type.code != 'CONST' || editedCategory.categorySetting.type.code != 'PERCENT' ? 'text-gray-500' : 'text-black' "
                   class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-blue-500   text-right"
                   :min="0" :max="editedCategory.categorySetting.type.code == 'PERCENT' ? 100 : 9000000000"/>
      <Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
              aria-label="Search"/>
    </div>
  </div>
</template>

<style scoped>

</style>