<script setup>
const modelValue = defineModel({
  type: String,
  default: ""
});
const emit = defineEmits(["update:modelValue"]);
const toggleLabel = (type) => {
  if (modelValue.value == type) {
    emit("update:modelValue", null);
  } else {
    emit("update:modelValue", type);
  }
};
const LABLES = [
  {
    type: "document",
    icon: "sym_o_article",
    label: "Documents"
  },
  {
    type: "image",
    icon: "sym_o_insert_photo",
    label: "Images"
  },
  {
    type: "video",
    icon: "sym_o_videocam",
    label: "Videos"
  },
  {
    type: "audio",
    icon: "sym_o_audiotrack",
    label: "Audio"
  },
  {
    type: "other",
    icon: "sym_o_text_snippet",
    label: "Archives"
  }
];
</script>

<template>
  <q-list>
    <q-item-label header>
      {{ $t('Labels') }}
    </q-item-label>

    <q-item v-for="label in LABLES" :key="label.type" clickable :active="modelValue == label.type"
      :active-class="`text-primary`" @click="toggleLabel(label.type)">
      <q-item-section avatar>
        <q-icon :name="label.icon" />
      </q-item-section>
      <q-item-section> {{ $t(label.label) }} </q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped>
.q-item--active{background-color:#e0e0e0}
</style>
