import React, { useEffect, useState } from 'react';
import { loadScript } from './utils';
import { logger } from '@zenview/micro-utils';
import './index.less';

const ZenMapGL = '/micro-apps/micro-dep-librarys/map/zenmap/ZenMapGL.js';
const ZenMapGL_Extend = '/micro-apps/micro-dep-librarys/map/zenmap/ZenMapGL_Extend.js';
const threebox = '/micro-apps/micro-dep-librarys/map/zenmap/lib/threebox.js';
const BigScreenMap = '/micro-apps/micro-dep-librarys/map/zenmap/BigScreenMap.js';

function LoaderMap({ children, fallback = null }) {
  const [isInit, setInit] = useState(false);
  useEffect(() => {
    const loader = async () => {
      await loadScript(ZenMapGL);
      await loadScript(ZenMapGL_Extend);
      await loadScript(threebox);
      await loadScript(BigScreenMap);
    };
    loader()
      .then(() => setInit(true))
      .catch((err) => logger.debug('地图加载失败！', err));
  }, []);

  return <>{isInit ? children : fallback}</>;
}

export default LoaderMap;
