import { FilterQueryParams } from '@win2win/shared';
import { useFetch } from '@win2win/shared-ui';
import { isNil, omit, orderBy } from 'lodash';
import { CounterItem } from 'src/components/common-ww/data/CounterItems.vue';
import { computed, Ref, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { StateConfig } from './W2WToolbarConfig';

const allState: CounterItem = {
  color: '',
  label: 'Todos',
  value: 99,
  count: 0,
};

export function useStateFilter(stateConfig: Ref<StateConfig | undefined>, layoutCode: string, filters: Ref<FilterQueryParams>) {
  const queryKey = computed(() => ['settings', layoutCode, 'stats']);
  const items = computed(() => orderBy(stateConfig.value?.items || [], 'position'));
  const url = computed(() => stateConfig.value?.queryUrl || stateConfig.value?.['url'] || '');
  const filtersWithoutCounters = computed(() => omit(filters.value, 'counters.value'));
  const { data, fetching, refetch, invalidate } = useFetch<any>(queryKey, url, filtersWithoutCounters);

  watch(
    data,
    (v) => {
      if (fetching.value) return;
      if (isNil(v)) invalidate();
    },
    { immediate: true }
  );
  const route = useRoute();
  const currentRoute = computed(() => route.fullPath);
  const localStorageKey = computed(() => currentRoute.value + '_ACTIVE_COUNTERS');

  const storedStates = localStorage.getItem(localStorageKey.value);
  const defaultValues = storedStates ? JSON.parse(storedStates) : [99];

  const activeStates = ref<(number | string)[]>(defaultValues);
  const states = computed<CounterItem[]>(() => {
    if (!items.value?.length) return [];
    return [{ ...allState }, ...items.value].map((item) => {
      const state = (data.value || []).find(({ state }) => state == item.value);
      return {
        ...item,
        count: state?.count || 0,
        active: activeStates.value.includes(item.value),
      } as CounterItem;
    });
  });

  const toggleState = ({ value }: CounterItem) => {
    let selected = [...activeStates.value];
    if (!!selected.filter((v) => v == value).length) {
      selected = selected.filter((item) => item != value);
    } else if (value === 99) {
      selected = [99];
    } else {
      selected = selected.filter((item) => item !== 99);
      selected.push(value);
    }
    if (!selected.length) selected.push(99);
    localStorage.setItem(localStorageKey.value, JSON.stringify(selected));
    activeStates.value = selected;
  };

  return { states, fetching, toggleState, refetch };
}