<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';

const selector = defineModel('selector');

defineProps<{
  list: {
    label: string;
    count: number;
  }[];
  clickable?: boolean;
}>();
</script>
<template>
  <AppBox bordered>
    <q-list>
      <q-item
        v-for="v in list"
        :key="v.label"
        class="rounded"
        :class="v.count === 0 ? 'disable-item' : ''"
        :clickable="v.count > 0 || clickable"
        :active="selector === v.label"
        :active-class="
          selector === v.label
            ? $q.dark.isActive
              ? 'active dark'
              : 'active'
            : ''
        "
        @click="selector = v.label"
      >
        <div class="row full-width items-center justify-between">
          <div>
            {{ $t(v.label) }}
          </div>
          <div class="dot text-weight-bold">{{ v.count }}</div>
        </div>
      </q-item>
    </q-list>
  </AppBox>
</template>

<style scoped>
.active {
  color: hsl(var(--info-fg)) !important;
  background-color: hsl(var(--info-bg));

  .dot {
    background-color: hsla(var(--info-bg));
    border: 1px solid hsl(var(--info-bg));
    color: white;
  }

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--info-bg));
  }
}

.q-item {
  align-items: center;
  border: 1px solid transparent;
  min-height: 0;
  padding: 0 16px;
  margin-bottom: 4px;
}

.disable-item {
  color: hsl(var(--text-mute));

  .dot {
    color: hsl(var(--text-mute));
    border: 1px solid transparent;
    background-color: hsla(var(--text-mute) / 0.1);
  }
}

.dot {
  height: 25px;
  width: 25px;
  background-color: hsla(var(--info-bg) / 0.1);
  border: 1px solid transparent;
  color: hsl(var(--info-bg));
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>
