import { useQuery } from '@tanstack/vue-query'

import { apiGetCitiesOfProvince, apiGetProvinces } from '@/services/api/common'

export const commonKeys = {
  provinces: () => ['common', 'provinces'],
  cities: (provinceId) => ['common', 'cities', provinceId],
}

// Sample data so the register form is usable while the backend geo endpoints
// are still being built. Once /provinces and /provinces/:id/cities are live,
// the real response overwrites these and the keys stay the same.
// const SAMPLE_PROVINCES = [
//   { id: 1, name: 'تهران' },
//   { id: 2, name: 'اصفهان' },
//   { id: 3, name: 'فارس' },
//   { id: 4, name: 'خراسان رضوی' },
//   { id: 5, name: 'قم' },
// ]

// const SAMPLE_CITIES_BY_PROVINCE = {
//   1: [
//     { id: 101, name: 'تهران' },
//     { id: 102, name: 'ری' },
//     { id: 103, name: 'شمیرانات' },
//     { id: 104, name: 'اسلامشهر' },
//   ],
//   2: [
//     { id: 201, name: 'اصفهان' },
//     { id: 202, name: 'کاشان' },
//     { id: 203, name: 'نجف‌آباد' },
//   ],
//   3: [
//     { id: 301, name: 'شیراز' },
//     { id: 302, name: 'مرودشت' },
//     { id: 303, name: 'کازرون' },
//   ],
//   4: [
//     { id: 401, name: 'مشهد' },
//     { id: 402, name: 'نیشابور' },
//     { id: 403, name: 'سبزوار' },
//   ],
//   5: [{ id: 501, name: 'قم' }],
// }

export const useGetProvincesQuery = (options = {}) =>
  useQuery({
    queryKey: commonKeys.provinces(),
    queryFn: () => apiGetProvinces(),
    select: (response) => response?.data ?? response,
    // initialData: SAMPLE_PROVINCES,
    ...options,
  })

export const useGetCitiesOfProvinceQuery = (provinceIdRef, options = {}) =>
  useQuery({
    queryKey: ['common', 'cities', provinceIdRef],
    queryFn: () => apiGetCitiesOfProvince(provinceIdRef.value),
    select: (response) => response?.data ?? response,
    // initialData: () => SAMPLE_CITIES_BY_PROVINCE[provinceIdRef.value] || [],
    ...options,
  })
