import { store } from '../../../common/store';

/**
 * Get templates
 * @param {string} code
 * @param {Array<{ src?: string, content?: string }>} scripts
 * @param {string} css
 */
export function getTemplates(title, scripts, css) {
  title = `${title ? title + ' - ' : ''}Apache ECharts Demo`;
  scripts = (scripts && scripts.slice()) || [];
  const lang = store.locale && store.locale.indexOf('zh') > -1 ? 'zh-CN' : 'en';

  const hasRootPath = store.sourceCode.indexOf('ROOT_PATH') > -1;
  const rootPathCode = hasRootPath ? `var ROOT_PATH = '${store.cdnRoot}';` : '';
  const hasJQuery = /\$[\.\(]+/g.test(store.sourceCode);
  hasJQuery &&
    scripts.unshift({
      src: 'https://fastly.jsdelivr.net/npm/jquery'
    });

  const htmlTpl = `<!DOCTYPE html>
<html lang="${lang}">
<head>
  <meta charset="utf-8">
  <title>${title}</title>
</head>
<body>
  <div id="chart-container"></div>
  ${scripts
    .filter((script) => !script.src || script.src.indexOf('dat.gui') < 0)
    .map((script) =>
      script.content
        ? `<script>${script.content}</script>`
        : `<script src="${
            script.src.indexOf('api.map.baidu.com/api') > -1
              ? script.src.replace(/(ak=)(\S+)$/, '$1YOUR_API_KEY')
              : script.src
          }"></script>`
    )
    .join('\n  ')}
</body>
</html>`;

  const jsTpl = `var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, ${store.darkMode ? "'dark'" : 'null'}, {
  renderer: '${store.renderer}',
  useDirtyRect: ${store.useDirtyRect}
});
var app = {};
${rootPathCode}
var option;

${store.sourceCode}

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);`;

  const cssTpl = `* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
${css || ''}`;

  return {
    title,
    html: htmlTpl,
    js: jsTpl,
    css: cssTpl
  };
}