<template>
  <span class="filter-button-container">
    <UiButton
      class="filter-button"
      :color="isFilterVisible ? StatusType.Default : StatusType.Information"
      :mode="isFilterVisible ? 'fill' : 'ghost'"
      :small="small"
      @click="$emits('toggleFilters')"
    >
      <FilterIcon />
    </UiButton>
    <Transition name="indicator-scale">
      <span v-if="showIndicator" class="indicator">{{ activeFiltersNb }}</span>
    </Transition>
  </span>
</template>

<script lang="ts" setup>
import { Filter as FilterIcon } from 'lucide-vue-next';
import { computed } from 'vue';
import UiButton from '../button/UiButton.vue';
import { StatusType } from '@/models';

interface UiFilterButtonProps {
  isFilterVisible: boolean;
  activeFiltersNb: number;
  small?: boolean;
}

const props = withDefaults(defineProps<UiFilterButtonProps>(), {
  isFilterVisible: false,
  activeFiltersNb: 0,
  small: false,
});

const $emits = defineEmits<{
  (e: 'toggleFilters'): void;
}>();

const showIndicator = computed(
  () => !props.isFilterVisible && props.activeFiltersNb > 0,
);
</script>

<style lang="scss" scoped>
.filter-button-container {
  position: relative;

  :deep(.bms-button .content) {
    margin: 0;
  }
  .filter-button {
    font-size: 20px;
  }
  .indicator {
    position: absolute;
    pointer-events: none;
    top: 8px;
    right: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bms-main-100);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75em;
    font-weight: 700;
  }
}

.indicator-scale-enter-active {
  transition: all 0.3s ease 0.2s;
}
.indicator-scale-leave-active {
  transition: all 0.3s ease;
}

.indicator-scale-enter-from,
.indicator-scale-leave-to {
  opacity: 0;
  transform: scale(50%);
}
.indicator-scale-enter-to,
.indicator-scale-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>
