/**
 * 베이스맵 레이어 설정
 * - 메인 프로젝트(mda-react-front)의 mapLayer.ts 참조
 */
import { XYZ } from 'ol/source';
import { transformExtent } from 'ol/proj';
import WebGLTileLayer from 'ol/layer/WebGLTile';

// 좌표계 상수
const EPSG_3857 = 'EPSG:3857';
const EPSG_4326 = 'EPSG:4326';

/**
 * 레이어 설정
 */
export const mapLayerConfig = {
  // 세계 지도 (줌 0-11)
  worldLayer: {
    source: new XYZ({
      url: '/MAPS/WORLD_webp/{z}/{x}/{y}.webp',
      minZoom: 0,
      maxZoom: 11,
      attributions: 'ⓒ OpenStreetMap',
    }),
    preload: Infinity,
  },

  // 동아시아 상세 (줌 12-15)
  eastAsiaLayer: {
    source: new XYZ({
      url: '/MAPS/EAST_ASIA_webp/{z}/{x}/{y}.webp',
      minZoom: 12,
      maxZoom: 15,
    }),
    preload: 0,
    minZoom: 12,
    zIndex: 1,
    extent: transformExtent([110, 20, 140, 45], EPSG_4326, EPSG_3857),
  },

  // 한국 상세 (줌 16-17)
  korLayer: {
    source: new XYZ({
      url: '/MAPS/KOR_webp/{z}/{x}/{y}.webp',
      minZoom: 16,
      maxZoom: 17,
    }),
    preload: Infinity,
    minZoom: 16,
    zIndex: 1,
    extent: transformExtent([124, 32, 133, 39], EPSG_4326, EPSG_3857),
  },
};

/**
 * 베이스맵 레이어 생성
 */
export const createBaseLayers = () => {
  const worldMap = new WebGLTileLayer(mapLayerConfig.worldLayer);
  const eastAsiaMap = new WebGLTileLayer(mapLayerConfig.eastAsiaLayer);
  const korMap = new WebGLTileLayer(mapLayerConfig.korLayer);

  return {
    worldMap,
    eastAsiaMap,
    korMap,
  };
};

export default createBaseLayers;
