'use client'

import type { ComponentType } from 'react'

import Mapir from 'mapir-react-component'

import 'mapir-react-component/dist/index.css'

/** Default Map.ir vector style (mapir-react, no wrapper) */
export const MAPIR_STYLE_URL = 'https://map.ir/vector/styles/main/mapir-xyz-style.json'

const mapCache = new Map<string, ComponentType<Record<string, unknown>>>()

export function getMapirMapComponent(apiKey: string): ComponentType<Record<string, unknown>> {
  const key = apiKey.trim()

  if (!key) {
    throw new Error('Map API key is empty')
  }
  const hit = mapCache.get(key)

  if (hit) {
    return hit
  }
  const MapComponent = Mapir.setToken({
    transformRequest(url: string) {
      return {
        url,
        headers: {
          'x-api-key': key,
          'Mapir-SDK': 'reactjs',
        },
      }
    },
  })

  mapCache.set(key, MapComponent)

  return MapComponent
}