<script setup>
import { countBy, difference, isEqual, pick } from 'es-toolkit';
import Search from '@/components/viewer/Search.vue';

const props = defineProps({
  products: Object,
  carts: Object,
  dealers: Object,
  defaultStatusIds: Object,
  defaultCartIds: Object,
  defaultDealerIds: Object,
  filters: Object,
  statuses: Object,
  statusModes: Object,
  statusMode: Object,
});

const {
  products,
  carts,
  dealers,
  defaultCartIds,
  defaultDealerIds,
  filters,
  statuses,
  statusModes,
  statusMode,
} = toRefs(props)

const emit = defineEmits(['switchStatusMode', 'updateFilters', 'resetCartDealerFilters', 'resetFilters']);
const store = useStore();

const showFilterModal = ref(null);
const { dealer } = store;
const filterTabs = dealer ? { CARTS: 'Giỏ hàng' } : { CARTS: 'Giỏ hàng', DEALERS: 'Đại lý' };

function openFiltersModal() {
  showFilterModal.value = {
    component: 'viewer/Filters',
    title: 'Tuỳ chọn',
    width: '40%',
    height: '20%',
    vbind: { 
      carts,
      dealers,
      filters,
      filterTabs,
      productCount: products.value.length 
    },
  };
}

function updateFilters(updatedFilters) {
  if (isEqual(pick(filters.value, ['cartIds', 'dealerIds']), updatedFilters.value)) 
    return;
  
  let payload; 
  const { lastlegendfiltertab } = store;

  if (lastlegendfiltertab === filterTabs.CARTS) {
    payload = {
      cartIds: toRaw(updatedFilters.value.cartIds),
      dealerIds: defaultDealerIds.value,
    };
  } else if (lastlegendfiltertab === filterTabs.DEALERS) {
    payload = {
      cartIds: defaultCartIds.value,
      dealerIds: toRaw(updatedFilters.value.dealerIds),
    };
  }
  emit('updateFilters', payload);
}

const cartOrDealerFilterInfo = computed(() => {
  // dealer or cart filter is modified
  if (filters.value.cartIds.length < carts.value.length) { 
    const filteredCarts = carts.value.filter(c => filters.value.cartIds.includes(c.id)).map(c => c.name.replace('Giỏ hàng ', ''));
    return {
      name: filterTabs.CARTS,
      values: filteredCarts.join(', '),
    } 
  }
  if (filters.value.dealerIds.length < dealers.value.length) { 
    const filteredDealers = dealers.value.filter(d => filters.value.dealerIds.includes(d.id)).map(c => c.code);
    return {
      name: filterTabs.DEALERS,
      values: filteredDealers.join(', '),
    } 
  }
  return false;
})

const productCountByStatus = computed(() => { 
  const productsFilteredBeforeStatus = products.value.filter(product => { 
    /* 
      cart__dealer: null means cart doesnt belong to any dealer
      - when no filter: count null
      - when filter: dont count null
     */
    const { cartIds, dealerIds } = filters.value;
    const { cart, cart__dealer } = product;

    const diffCartFilter = difference(defaultCartIds.value, cartIds);
    const diffDealerFilter = difference(defaultDealerIds.value, dealerIds);
    const noCartFilter = diffCartFilter.length === 0;
    const noDealerFilter = diffDealerFilter.length === 0;    
    const cartCondition = noCartFilter ? cartIds.includes(cart) || cart === null : cartIds.includes(cart);
    const dealerCondition = noDealerFilter ? dealerIds.includes(cart__dealer) || cart__dealer === null : dealerIds.includes(cart__dealer);
    
    return cartCondition && dealerCondition;
  });

  const result = countBy(productsFilteredBeforeStatus, (product) => 
    statusMode.value === statusModes.value.SIMPLE ? product.status__sale_status : product.status
  );

  return result;
});

const visibilityAll = computed(() => {
  return filters.value.statusIds.length > 0;
})
</script>
<template>
  <Teleport to="#legend.docking-panel.docking-panel-container-solid-color-a">
    <div id="customBtns">
      <div class="is-sr-only">
        <!-- hack to speed up first eye-off icon appearance -->
        <SvgIcon v-bind="{ 
          name: 'eye-autodesk-off.svg', 
          type: 'black', 
          size: 15 
        }" />
      </div>
      <button 
        title="Show/hide all legends"
        @click="() => emit('updateFilters', {
          statusIds: visibilityAll ? [] : statuses.map(s => s.id)
        })"
      >
        <SvgIcon v-bind="{ 
          name: `eye-autodesk-${visibilityAll ? 'on' : 'off'}.svg`, 
          type: 'black', 
          size: 17 
        }" />
      </button>
    </div>
  </Teleport>
  <Search :products="products" />
  <div 
    class="tabs mb-0 has-background-white is-fullwidth is-flex-shrink-0"
    style="position: sticky; top: 32.5px; z-index: -1"
    >
    <ul class="mx-0">
      <li v-for="mode in Object.values(statusModes)"
        :class="{ 'is-active' : statusMode === mode }"
        @click="() => {
          if (statusMode !== mode) emit('switchStatusMode', mode);
        }"
      >
        <a :class="[
          'is-size-7', 
          statusMode === mode && 'has-text-weight-bold has-text-secondary' 
        ]">{{ mode }}</a>
      </li>
    </ul>
  </div>
  <div class="fs-13 has-background-white" style="z-index: -2">
    <div 
      v-for="{ id, name, color } in statuses.filter(x => {
        // hide Chưa bán in dealer
        return dealer ? x.code !== 'not-sold' : true 
      })"
      class="status is-flex is-gap-1 is-justify-content-space-between is-clickable"
      @click="() => emit('updateFilters', { statusIds: [id] })"
    >
      <div class="statusInfo">
        <div 
          class="swatch"
          :style="{ backgroundColor: color }"
        ></div>
        <p>
          <span>{{ name }}</span>
        </p>
      </div>
      <div>
        <span class="mr-2 has-text-right is-inline-block" style="line-height: 1">
          {{ productCountByStatus[id] || 0  }}
        </span>
        <button class="eyeBtn" @click.stop="() => {
          const selected = filters.statusIds.includes(id);
          const payload = {
            statusIds: selected ? filters.statusIds.filter(statusId => statusId !== id) : [...filters.statusIds, id]
          }
          emit('updateFilters', payload);
        }">
          <SvgIcon v-bind="{
            name: `eye-autodesk-${filters.statusIds.includes(id) ? 'on' : 'off'}.svg`,
            type: 'black',
            size: 17
          }" />
        </button>
      </div>
    </div>
  </div>
  <button 
    :class="[
      'button is-fullwidth is-radiusless is-gap-0.5 is-small is-flex-direction-column is-align-items-stretch fs-13', 
      cartOrDealerFilterInfo && 'is-light'
    ]" 
    style="
      position: sticky;
      bottom: 0;
      box-sizing: border-box;
      border-inline-width: 0;
      border-bottom-width: 0;
    "
    @click="openFiltersModal"
  >
    <div class="is-flex is-justify-content-space-between">
      <div class="is-flex is-gap-1">
        <SvgIcon v-bind="{ name: 'filter.svg', type: 'primary', size: 18 }" />
        <span>Lọc</span>
      </div>
      <div style="margin-right: 5px">
        <span class="has-text-weight-bold">{{ Object.values(productCountByStatus).reduce((p, c) => p + c, 0) }}</span>
        <span style="margin-left: 9px">SP</span>
      </div>
    </div>
    <div 
      v-if="cartOrDealerFilterInfo" 
      class="is-fullwidth is-flex is-flex-direction-column is-align-items-flex-start has-text-left"
    >
      <p class="is-fullwidth" style="text-wrap: wrap;">
        {{ cartOrDealerFilterInfo.name }}: 
        {{ cartOrDealerFilterInfo.values }}
      </p>
    </div>
  </button>
  <Teleport to="#legend.docking-panel.docking-panel-container-solid-color-a">
    <Modal 
      v-if="showFilterModal" 
      v-bind="showFilterModal"
      @close="showFilterModal = null" 
      @updateFilters="updateFilters"
      @resetCartDealerFilters="emit('resetCartDealerFilters')"
    />
  </Teleport>
</template>
<style>
#legend.docking-panel {
  right: 10px;
  bottom: 10px;
  min-width: 150px;
  width: 275px;
  height: fit-content;
  
  --hover-bg: rgba(0, 0, 0, 0.1);

  &.top-initial-important {
    top: initial !important; /* fixed top until meshes & colors are added */
  }
  
  .docking-panel-title {
    font-size: 16px;
    font-weight: 600;
    border-bottom: none;
    text-transform: none;
    flex-shrink: 0;
  }

  .docking-panel-close {
    width: 40px;
    background-position: 14px 19px;

    &:hover {
      /* make it uniform with our buttons */
      background-color: var(--hover-bg);
      transition-duration: var(--bulma-duration);
      transition-property: background-color, border-color, color;
    }
  }

  .docking-panel-footer {
    border-radius: 0 0 5px 5px;
  }
  
  .content.docking-panel-scroll {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    z-index: -1;
    overflow: scroll;
    height: min-content;
  }

  .status {
    &:nth-child(even) {
      background-color: #f2f2f280;
    }
  
    &:hover {
      background-color: rgba(0,191,255,.2);
    }

    .statusInfo {
      padding-left: 10px;
      display: flex;
      gap: 0.5rem;
      align-items: center;

      p {
        display: flex;
        gap: 0.25rem;
      }
    }
  }

  #customBtns {
    position: absolute;
    top: 0px;
    right: 40px;
    width: 40px;
    height: 50px;
    z-index: 1;
    
    display: flex;
  
    & > * {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: var(--hover-bg);
      }
    }
  }

  .eyeBtn {
    width: 36px;
    height: 36px;

    &:hover {
      background-color: var(--hover-bg);
    }
  }

  .swatch {
    width: 20px;
    height: 20px;
  }
}
</style>