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

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

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

const emits = defineEmits(["category-updated"]);

const isEditing = ref(false);
const currentLimit = ref(props.category.currentLimit);

const startEditing = () => {
  isEditing.value = true;
};

const stopEditing = () => {
  isEditing.value = false;
  emits("category-updated", { ...props.category, currentLimit: currentLimit.value });
};

// Реактивное вычисление отношения затрат к плану
const spentPlannedRatio = computed(() => {
  return props.category.currentLimit
      ? (props.category.currentSpent / props.category.currentLimit) * 100
      : 0;
});

// Синхронизация `currentLimit` с `props.category.currentLimit` при обновлении
watch(
    () => props.category.currentLimit,
    (newLimit) => {
      currentLimit.value = newLimit;
    }
);
</script>

<template>

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

    <div class="flex flex-row justify-between w-full">
      <div :class="isEditing ? 'w-1/5': ''" class="min-w-1 w-4/6 justify-between ">
        <h4 class="text-lg line-clamp-1">{{props.category.category.icon }} {{ props.category.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  items-center w-4/6 ">

        <!-- Сумма, которая становится редактируемой при клике -->
        <button v-if="!isEditing" @click="startEditing"
                class="text-lg font-bold cursor-pointer w-fit text-end line-clamp-1">
          <div class="flex flex-row gap-2 items-baseline" >
          <p class="font-light text-sm" :class="spentPlannedRatio == 0 ? 'hidden': ''">{{spentPlannedRatio.toFixed(0)}} %</p>
          <p class="line-clamp-1 w-fit">{{ formatAmount(props.category.currentSpent) }} /
            {{ formatAmount(currentLimit) }} ₽</p>
          </div>
        </button>

        <InputNumber v-else ref="inputRefs" type="text" v-model="props.category.currentLimit"
                     class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-blue-500  w-32 text-right"
                     :min="props.category.categoryPlannedLimit" :max="900000" :invalid="currentLimit < props.category.categoryPlannedLimit" v-tooltip.top="'Сумма не должна быть ниже суммы запланированных!'"/>
        <Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
                aria-label="Search"/>

      </div>
    </div>
    <div class="flex flex-col w-full">
    <ProgressBar :value="Number(spentPlannedRatio.toFixed(0))" class="w-full" :show-value="false"> </ProgressBar>
<!--    <div class="z-50">{{formatAmount(spentPlannedRatio.toFixed(0))}}%</div>-->
    </div>

  </div>
</template>

<style scoped>

</style>