import * as THREE from 'https://esm.sh/three';
import { ThreeRendererElement } from './ThreeRendererElement.js';

export class LightElement extends HTMLElement {
  constructor() {
    super();

    this.light = new THREE.DirectionalLight(this.getAttribute('color') || 0xfff, 0.5);
  }

  static get observedAttributes() {
    return [ "color" ];
  }

  attributeChangedCallback(name, old_value, value) {
    if(name == 'color') {
      this.light.color = new THREE.Color(value);
    }
  }

  connectedCallback() {
    var scene = this.closest('three-scene');

    if(!scene.ready) {
      var self = this;

      scene.addEventListener('ready', function() {
        scene.scene.add(self.light);
      })
    } else {
      scene.scene.add(this.light);
    }
    this.ready = true;
  }
}

customElements.define('three-light', LightElement);