/*eslint-disable quotes */
const AFRAME = window.AFRAME;
import writeSceneToDOM from './writeSceneToDOM';

const START_ROTATION = 220;
const START_Y = 2.5;
const MAX_ROTATION = 120;
const ROTATION_DELTA = 35;
const Y_DELTA = 2.5;

// selectCb(id)
export default function draw () {
  let data = [
    { id: '1', imgSrc: 'https://s3.amazonaws.com/vrdb/shots/chr_1.png', name: 'chr1' }
  ];
  // make assets HTML
  let assetsStr = data.reduce( (current, d) => {
    let thisHtml = `<img id='shot${d.id}' src='${d.imgSrc}' crossorigin='anonymous'>`;
    current += thisHtml;
    return current;
  }, '');

  // make HTML string from data
  let rotation = START_ROTATION;
  let y = START_Y;
  let menuStr = data.reduce( (current, d) => {
    // src='#shot${d.id}' height='2.0'
    let imgHtml = `
      <a-entity position='0 ${y} 0'>
        <a-curvedimage
          class='clickable'
          src='#shot${d.id}' height='2.0'
          radius='5.7' theta-length='25'
          rotation='0 ${rotation} 0'
          data-location='${d.id}'
          set-location
          event-set__1="_event: mouseenter; scale: 1.2 1.2 1; position: 0.25 0 0;"
          event-set__2="_event: mouseleave; scale: 1 1 1; position: 0 0 0;"
          sound="on: click; src: #click-sound"
          update-raycaster="#cursor"
        >
        </a-curvedimage>
      </a-entity>
    `;
    current += imgHtml;
    rotation -= ROTATION_DELTA;
    if (rotation < MAX_ROTATION) {
      rotation = START_ROTATION;
      y -= Y_DELTA;
    }
    return current;
  }, '');

  // actually render to HTML
  let assetEl = document.getElementById('dynamicAssets');
  let cameraEl = document.getElementById('cameraTarget');
  assetEl.innerHTML = assetsStr;
  writeSceneToDOM(menuStr);
  cameraEl.innerHTML = getCameraHtml();
}

function getCameraHtml () {
  return `
    <a-entity camera look-controls>
      <a-cursor id="cursor"
          material="color: white; shader: flat"
          animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
          event-set__1="_event: mouseenter; color: springgreen"
          event-set__2="_event: mouseleave; color: white"
          raycaster="objects: .clickable"
          fuse='true' fuseTimeout='2000'
      >
      </a-cursor>
    </a-entity>
  `;
}

@@ -124,17 +124,17 @@
 TION = 2
-2
+8
 0;%0Aconst
@@ -174,10 +174,9 @@
 N = 
-12
+9
 0;%0Ac
@@ -201,10 +201,10 @@
 A = 
-35
+28
 ;%0Aco
@@ -223,16 +223,81 @@
 = 2.5;%0A%0A
+const SHOT_BASE = 'https://s3.amazonaws.com/vrdb/shots/chrom_';%0A%0A
 // selec
@@ -348,108 +348,163 @@
 let 
-d
+chromD
 ata = %5B
+%5D;
 %0A  
-  %7B id: '1', imgSrc: 'https://s3.amazonaws.com/vrdb/shots/chr_1.png',
+for (let i = 1; i %3C= 23; i++) %7B%0A    chromData.push(%7B%0A      id: i,%0A      imgSrc: %60$%7BSHOT_BASE%7D$%7Bi%7D.png%60,%0A     
  name: 
-'chr1' %7D%0A  %5D;
+%60chr$%7Bi%7D%60%0A    %7D);%0A  %7D
 %0A  /
@@ -536,25 +536,30 @@
 assetsStr = 
-d
+chromD
 ata.reduce( 
@@ -819,17 +819,22 @@
 nuStr = 
-d
+chromD
 ata.redu
@@ -2367,17 +2367,17 @@
 imeout='
-2
+4
 000'%0A   

change menu