import * as THREE from "three";
import HorizontalBox from "./horizontalBox";


export default class BoxManager {
  constructor(scene) {
    this.scene = scene
    this.loadingManager = new THREE.LoadingManager()
    this.loader = new THREE.TextureLoader( this.loadingManager )
    this.model = new THREE.Group()
    this.maps = {}
    this.imgList = []
    this.opacity = 1

    this.onbindEvent()
  }

  load = (list) => {
    list.forEach((item, index) => {
      if( Array.isArray(item)) { //横排
        const box = new HorizontalBox(this, item, index)
        this.model.add(box)
      } else {//竖排
        
      }
    });

    this.scene.scene.add(this.model)
  }

  onbindEvent = () => {
    const _this = this
    this.loadingManager.onStart = function(url, itemsLoaded, itemsTotal) {
      // console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
      console.log('loading_manager: loading...')
    }
    this.loadingManager.onLoad = function() {
      console.log('loading_manager: loading complete!');
    }
    this.loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) {
      // console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
    }
    this.loadingManager.onError = function(url) {
      console.error( 'loading_manager: error loading ' + url );
    }
  }

  setVisible = (val) => {
    if(!this.model) return
    this.model.visible = val
  }

  setOpacity = (val) => {
    this.material.opacity = val
  }
}