import * as RE from 'rogue-engine';
import * as THREE from 'three';

import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js'
import { WireframeGeometry2 } from 'three/examples/jsm/lines/WireframeGeometry2.js'

export default class WireframeShaderMaterialComponent extends RE.Component {

  @RE.props.material() baseMaterial: THREE.Material
  awake() {
  }

  start() {
    let geometry = new WireframeGeometry2((this.object3d as any).geometry)
    const matLine = new LineMaterial({

      color: 0x4422ff,
      linewidth: 5,
      dashed: false,

    });

    matLine.resolution.set( window.innerWidth, window.innerHeight );

    const wireframe = new Wireframe(geometry, matLine)
    wireframe.computeLineDistances()
    wireframe.scale.set(1, 1, 1)
    this.object3d.add(wireframe);

    (this.object3d as any).material = this.baseMaterial
  }

  update() {

  }
}

RE.registerComponent(WireframeShaderMaterialComponent);