import { isNil } from 'lodash';
import { api } from 'src/boot/axios';
import { ZonaPais } from 'src/models';
import { Ref, ref, watch } from 'vue';

export function useFetchZonas(idPais: Ref<number | null>) {
  const loading = ref(false);
  const zonas = ref<ZonaPais[]>([]);
  watch(idPais, (id) => fetchZonas(id), { immediate: true});

  function fetchZonas(id: number | null) {
    if (isNil(id)) {
      zonas.value = [];
      return;
    }
    loading.value = true;
    api
      .get(`/public/paises_zonas_lista`, { params: { byEqualCol: { 'paises_zonas.ID_PAIS': id } } })
      .then(({ data }) => {
        zonas.value = data.items;
      })
      .finally(() => (loading.value = false));
  }
  return { loading, zonas };
}