import * as THREE from 'https://esm.sh/three';

const attrs_dimensions = [ 'height', 'width', 'depth' ];
const attrs_position = [ 'x', 'y', 'z' ];
const attrs_rotation = [ 'rx', 'ry', 'rz' ];

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

    var attrs = BaseGeometryElement.observedAttributes;

    for(let i in attrs) {
      Object.defineProperty(this, attrs[i], {
        get: function() {
          return this.getAttribute(attrs[i]);
        },
        set: function(v) {
          return this.setAttribute(attrs[i], v);
        }
      });
    }
  }

  static get observedAttributes() {
    return [
      'color',
      'height', 'width', 'depth',
      'x', 'y', 'z',
      'rx', 'ry', 'rz',
    ]
  }

  parentO3DCallback() {}

  connectedCallback() {
    var parentEl = this.parentElement.closest('three-group, three-scene');

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

      parentEl.addEventListener('ready', function() {
        var o3d = parentEl.nodeName == "THREE-GROUP" ? parentEl.group : parentEl.scene;
        self.parentO3DCallback(o3d);

        self.ready = true;
        self.dispatchEvent(new CustomEvent("ready"));
      });
    } else {
      var o3d = parentEl.nodeName == "THREE-GROUP" ? parentEl.group : parentEl.scene;
      this.parentO3DCallback(o3d);
      this.ready = true;
      this.dispatchEvent(new CustomEvent("ready"));
    }
  }

  attributeChangedCallback(name, old_value, value) {
    if(!this.ready) return;

    var obj = {};

    if(attrs_dimensions.includes(name)) {
      obj = this.geometry[name];
    }

    if(attrs_position.includes(name)) {
      obj = this.mesh.position[name];
    }

    if(attrs_rotation.includes(name)) {
      console.log(name);
      obj = this.mesh.rotation[name];
    }

    obj[name] = value;
  }
}