import type { ComputedRef, Ref } from 'vue'
import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
import { ref, useApi, useInjectionState } from '#imports'
import type { Row } from '~/lib'

const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
  (
    meta: Ref<TableType | MapType | undefined>,
    viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
  ) => {
    const formattedData = ref<Row[]>()

    const { api } = useApi()
    const { project } = useProject()

    const mapMetaData = ref<MapType>({})

    const geoDataField = ref<string>('')

    const geoDataFieldColumn = ref<ColumnType | undefined>()

    async function loadMapData() {
      if (!viewMeta?.value?.id || !meta?.value?.columns) return

      formattedData.value = []

      const res = await api.dbViewRow.list(
        'noco',
        project.value.id!,
        meta.value!.id!,
        viewMeta.value!.id!,
        geoDataFieldColumn!.value!.id,
      )

      geoDataFieldColumn.value =
        (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}

      geoDataField.value = geoDataFieldColumn.value.title!

      const { fk_geo_data_col_id, meta: stack_meta } = mapMetaData.value

      const stackMetaObj: any.value = stack_meta ? JSON.parse(stack_meta as string) : {}

      console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
      // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return

      // reset formattedData & countByStack to avoid storing previous data after changing grouping field
      

      //   alert('in loadMapData')
      //   debugger
      

      console.log('res in mapviewdatastore', res)

      //   for (const data of res.list) {
      //     formattedData.value = data.value
      //   }
      formattedData.value = res.list
    }

    return {
      formattedData,
      loadMapData,
      mapMetaData,
    }
  },
)

export { useProvideMapViewStore }

export function useMapViewStoreOrThrow() {
  const mapViewStore = useMapViewStore()

  if (mapViewStore == null) throw new Error('Please call `useProvideMapViewStore` on the appropriate parent component')

  return mapViewStore
}

// async function loadMapData() {
//     if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return

//     // reset formattedData & countByStack to avoid storing previous data after changing grouping field
//     formattedData.value = new Map<string | null, Row[]>()
//     countByStack.value = new Map<string | null, number>()

//     let res

//     if (isPublic.value) {
//       res = await fetchSharedViewGroupedData(groupingFieldColumn!.value!.id!)
//     } else {
//       res = await api.dbViewRow.groupedDataList(
//         'noco',
//         project.value.id!,
//         meta.value!.id!,
//         viewMeta.value!.id!,
//         groupingFieldColumn!.value!.id!,
//         {},
//         {},
//       )
//     }

//     for (const data of res) {
//       const key = data.key
//       formattedData.value.set(key, formatData(data.value.list))
//       countByStack.value.set(key, data.value.pageInfo.totalRows || 0)
//     }
//   }