<template>
  <q-card flat bordered class="product-card">
    <q-expansion-item v-model="expanded" hide-expand-icon>
      <template #header>
        <div class="row items-center justify-between full-width q-px-xs q-py-sm" style="gap: 8px">
          <span class="text-subtitle2 text-weight-bold text-primary">
            {{ title }}
          </span>
          <div class="row items-center" style="gap: 8px">
            <q-badge
              color="secondary"
              text-color="black"
              :label="currentStock"
              class="q-px-lg q-py-sm"
            />
            <q-icon
              :name="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
              size="24px"
              color="secondary"
            />
          </div>
        </div>
      </template>

      <q-separator />

      <q-card-section class="q-px-md q-py-sm">
        <div class="column" style="gap: 8px">
          <span class="text-caption text-foreground ellipsis-2-lines">
            {{ description }}
          </span>
          <span class="text-body2">
            Valor: {{ formatToBRLCurrency(unitPrice) }}
          </span>
          <div class="row items-center justify-end">
            <span class="text-body2 text-weight-bold">{{ formatToBRLCurrency(totalValue) }}</span>
          </div>
          <slot name="details" />
          <div class="row justify-end" style="gap: 4px; margin-top: 4px">
            <q-btn v-if="canEdit" flat dense round icon="mdi-pencil" color="primary" size="sm" @click.stop="$emit('edit')" />
            <q-btn v-if="canDelete" flat dense round icon="mdi-delete" color="negative" size="sm" @click.stop="$emit('delete')" />
          </div>
        </div>
      </q-card-section>
    </q-expansion-item>
  </q-card>
</template>

<script setup>
import { ref } from "vue";
import { formatToBRLCurrency } from "src/helpers/utils";

const expanded = ref(false);

defineEmits(["edit", "delete"]);

defineProps({
  canEdit: { type: Boolean, default: false },
  canDelete: { type: Boolean, default: false },
  title: {
    type: String,
    default: "titulo",
  },
  description: {
    type: String,
    default: "descricao do produto",
  },
  unitPrice: {
    type: Number,
    default: 0,
  },
  currentStock: {
    type: Number,
    default: 0,
  },
  totalValue: {
    type: Number,
    default: 0,
  },
});
</script>

<style scoped>
.product-card {
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.product-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ellipsis-2-lines {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
