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

export class GroupElement extends BaseGeometryElement {
  constructor() {
    super();
  }

  parentO3DCallback(parent) {
    this.group = new THREE.Group();
    this.group.position.set(this.getAttribute('x'), this.getAttribute('y'), this.getAttribute('z'));
    this.group.rotation.set(this.getAttribute('rx'), this.getAttribute('ry'), this.getAttribute('rz'));

    parent.add(this.group);
  }

  attributeChangedCallback(name, old, value) {
    if(this.group && [ 'x', 'y', 'z' ].includes(name)) {
      this.group.position[name] = parseInt(value);
    }

      console.log(this.group, name);
    if(this.group && [ 'rx', 'ry', 'rz' ].includes(name)) {
      this.group.rotation[name] = parseInt(value);
    }
  }
}

customElements.define('three-group', GroupElement);