import { Id } from '@win2win/shared';
import { getValue, useFetch } from '@win2win/shared-ui';
import { isNil } from 'lodash';
import { usePopup } from 'src/composables/usePopup';
import { LayoutContext } from 'src/models';
import { useLayout } from 'src/widgets/useLayout';
import { StorableEntity } from 'src/widgets/useStoreLite';
import { computed, isRef, MaybeRef, onUnmounted, provide, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

const liteDataFetchingPaths: Record<LayoutContext, string> = {
  captacion: 'captacion_lite',
  proveedor: 'proveedores',
  producto: 'productos',
  delegacion: 'delegacion',
  cliente: 'clientes',
  marketing: 'marketing',
  liquidacion: 'liquidaciones',
  usuario: 'usuarios',
  operacion: 'operacion',
  planificacion: 'planificacion',
  llamada: 'llamadas',
  partner: 'partners',
};

const idKeys: Partial<Record<LayoutContext, string>> = {
  captacion: 'ID_CAPTACION',
  proveedor: 'ID_PROVEEDOR',
  delegacion: 'ID_DELEGACION',
  producto: 'ID_PRODUCTO',
  cliente: 'ID_CLIENTE',
  marketing: 'ID_MARKETING',
  liquidacion: 'ID_LIQUIDACION',
  usuario: 'ID_USUARIO',
  partner: 'ID_PARTNER',
};

export function useDynamicDetailPage<T extends StorableEntity>(_context: MaybeRef<LayoutContext>, customId?: MaybeRef<Id>) {
  const router = useRouter();
  const route = useRoute();
  const store = useStore();
  const context = computed(() => getValue(_context));
  const id = computed(() => {
    if (customId) return isRef(customId) ? customId.value : customId;
    const key = idKeys[context.value];
    if (!key) return null;
    if (isNil(route.params[key])) return null;
    return Number(route.params[key]);
  });
  const queryKey = computed(() => [context.value, id.value]);
  const path = computed(() => {
    const base = liteDataFetchingPaths[context.value];
    return `${base}/${id.value}`;
  });

  const { data, fetching, refetch } = useFetch<T>(queryKey, path);
  provide('refetchData', refetch);

  watch(
    data,
    (value) => {
      if (!value) return;
      store.commit(`${context.value}/setData`, value);
    },
    {
      immediate: true,
    }
  );
  const { layout } = useLayout(context.value, 'detalle');
  usePopup(context.value, 'detalle');

  const mounted = ref(false);
  watch(
    layout,
    (val) => {
      if (mounted.value || customId) return;
      const firstView = val?.[0]?.view;
      if (!firstView) return;
      setTimeout(() => {
        router.push(firstView);
      }, 10);
      mounted.value = true;
    },
    { immediate: true }
  );
  onUnmounted(() => {
    if (!!context.value) {
      store.commit(`${context.value}/reset`);
    }
  });

  return { fetching, data, refetch, id };
}