/**
 * Created at 2018/3/6.
 * @Author Ling.
 * @Email i@zeroling.com
 */
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { babelReady, loadScriptAsync, BASE_CDN } from '../../utils';

const assets = 'https://g-assets.daily.taobao.net/ice/ice-study-assets/0.2.15/index';
let loaded = false;

export default class extends Component {
  static propTypes = {};

  static defaultProps = {};

  componentDidMount() {
    if (!loaded) {
      const script = document.createElement('script');
      const css = document.createElement('link');
      css.rel = 'stylesheet';
      css.type = 'text/css';
      script.src = assets + '.js';
      css.href = assets + '.css';
      script.onload = () => {
        loaded = true;
        ReactDOM.render(window.IceStudyAssets, this.mountNode);
      };

      babelReady()
        .then((babel) => {
          window.Babel = babel;
        })
        .then(() => loadScriptAsync(BASE_CDN))
        .then(() => {
          return new Promise((resolve) => {
            require.ensure([], (require) => {
              const externals = require('../../service/externals');
              resolve(externals);
            }, 'externals');
          });
        })
        .then((externals) => {
          Object.keys(externals).forEach((npm) => {
            window[npm] = window[externals[npm]];
          });
          // hack for study env
          window.Next = window.ICEDesignBase;
          document.head.appendChild(css);
          window.ICE.publicPath = null;
          document.body.appendChild(script);
        });
    } else {
      ReactDOM.render(window.IceStudyAssets, this.mountNode);
    }
  }

  render() {
    return (
      <div ref={(ref) => {
        this.mountNode = ref;
      }} />
    );
  }
}