<script setup>
const props = defineProps({
  carts: Array,
  filters: Object,
  filterTabs: Object,
  productCount: Number,
});

const store = useStore();
const { $getdata } = useNuxtApp();
const emit = defineEmits(['modalevent', 'close']);
const dealers = ref([]);

onMounted(async () => {
  const dealersData = await $getdata('cart', undefined, { 
    values: 'dealer,dealer__name',
    filter: {
      dealer__name__icontains: ''
    },
    distinct_values: {
      product_count_by_dealer: { type: 'Count', field: 'prdcart' }
    },
    sort: 'dealer__name',
    summary: 'annotate'
  });

  dealers.value = dealersData;
});

const activeFilterTab = ref(store.lastlegendfiltertab);

const localFilterStates = ref({
  cartIds: props.filters.cartIds,
  dealerIds: props.filters.dealerIds,
});

function filterTabChange(newTab) {
  activeFilterTab.value = newTab;
  store.commit('lastlegendfiltertab', newTab);
}

function updateFilters() {
  emit('close');
  emit('modalevent', { name: 'updateFilters', data: localFilterStates });
}

function resetCartDealerFilters() {
  emit('close');
  emit('modalevent', { name: 'resetCartDealerFilters' });
}

watch(() => props.filters, () => {
  localFilterStates.value = { 
    cartIds: props.filters.cartIds,
    dealerIds: props.filters.dealerIds,
  };
}, { deep: true })
</script>
<template>
  <div class="fs-14">
    <div class="tabs is-boxed is-fullwidth">
      <ul class="mx-0">
        <li 
          v-for="tab in filterTabs"
          :class="{ 'is-active' : tab === activeFilterTab }"
          @click="() => {
            if (tab !== activeFilterTab) filterTabChange(tab);
          }"
        >
        <a :class="[{
          'has-text-weight-bold has-text-secondary': tab === activeFilterTab,
          }]">Lọc theo {{ tab }}</a>
        </li>
      </ul>
    </div>
    <div v-if="activeFilterTab === filterTabs.CARTS">
      <li
        class="is-light p-2 is-flex is-align-items-center is-justify-content-space-between is-gap-2 is-clickable"
        @click="() => {
          // toggle all
          if (localFilterStates.cartIds.length === carts.length) {
            localFilterStates.cartIds = [];
          } else {
            localFilterStates.cartIds = carts.map(c => c.id);
          }
        }"
      >
        <span class="has-text-weight-bold">Tất cả</span>
        <div class="is-flex is-gap-2 is-flex-shrink-0">
          <span class="has-text-weight-bold">{{ productCount }}</span>
          <SvgIcon v-bind="{
            name: localFilterStates.cartIds.length === carts.length
              ? 'checked.svg'
              : localFilterStates.cartIds.length === 0
                ? 'uncheck.svg'
                : 'indeterminate.svg',
            type: localFilterStates.cartIds.length > 0 ? 'primary' : 'twitter',
            size: 22
          }" />
        </div>
      </li>
      <ul style="max-height: 420px; overflow-y: scroll;">
        <li
          v-for="cart in carts"
          class="border-bottom p-2 is-flex is-align-items-center is-justify-content-space-between is-gap-2 is-clickable"
          @click="() => {
            const selected = localFilterStates.cartIds.includes(cart.id);
            if (selected) {
              localFilterStates.cartIds = localFilterStates.cartIds.filter(id => id !== cart.id);
            } else {
              localFilterStates.cartIds = [...localFilterStates.cartIds, cart.id];
            }
          }"
        >
          <span>{{ cart.name }}</span>
          <div class="is-flex is-gap-2 is-flex-shrink-0">
            <span>{{ cart.product_count }}</span>
            <SvgIcon v-bind="{
              name: localFilterStates.cartIds.includes(cart.id) ? 'checked.svg' : 'uncheck.svg',
              type: localFilterStates.cartIds.includes(cart.id) ? 'primary' : 'twitter',
              size: 22
            }" />
          </div>
        </li>
      </ul>
    </div>
    <div v-else>
      <li
        class="is-light p-2 is-flex is-align-items-center is-justify-content-space-between is-gap-2 is-clickable"
        @click="() => {
          // toggle all
          if (localFilterStates.dealerIds.length === dealers.length) {
            localFilterStates.dealerIds = [];
          } else {
            localFilterStates.dealerIds = dealers.map(c => c.id);
          }
        }"
      >
        <span class="has-text-weight-bold">Tất cả</span>
        <div class="is-flex is-gap-2 is-flex-shrink-0">
          <span class="has-text-weight-bold">{{ productCount }}</span>
          <SvgIcon v-bind="{
            name: localFilterStates.dealerIds.length === dealers.length
              ? 'checked.svg'
              : localFilterStates.dealerIds.length === 0
                ? 'uncheck.svg'
                : 'indeterminate.svg',
            type: localFilterStates.dealerIds.length > 0 ? 'primary' : 'twitter',
            size: 22
          }" />
        </div>
      </li>
      <ul>
        <li
          v-for="dealer in dealers"
          class="border-bottom p-2 is-flex is-align-items-center is-justify-content-space-between is-gap-2 is-clickable"
          @click="() => {
            const selected = localFilterStates.dealerIds.includes(dealer.dealer);
            if (selected) {
              localFilterStates.dealerIds = localFilterStates.dealerIds.filter(id => id !== dealer.dealer);
            } else {
              localFilterStates.dealerIds = [...localFilterStates.dealerIds, dealer.dealer];
            }
          }"
        >
          <span>{{ dealer.dealer__name }}</span>
          <div class="is-flex is-gap-2 is-flex-shrink-0">
            <span>{{ dealer.product_count_by_dealer }}</span>
            <SvgIcon v-bind="{
              name: localFilterStates.dealerIds.includes(dealer.dealer) ? 'checked.svg' : 'uncheck.svg',
              type: localFilterStates.dealerIds.includes(dealer.dealer) ? 'primary' : 'twitter',
              size: 22
            }" />
          </div>
        </li>
      </ul>
    </div>
    <div class="mt-5 is-flex is-gap-2">
      <button
        class="button is-primary"
        @click="updateFilters"
      >
        Áp dụng
      </button>
      <button
        class="button"
        @click="resetCartDealerFilters"
      >
        Reset
      </button>
    </div>
  </div>
</template>
<style scoped>
li:hover {
  background-color: var(--bulma-primary-95);
}
</style>