import { AFRAME } from "../../react/root";

export default function () {
  const THREE: any = (window as any).THREE;
  /* global AFRAME */

  if (typeof AFRAME === 'undefined') {
    throw new Error('Component attempted to register before AFRAME was available.');
  }


  AFRAME.registerComponent('bevelbox', {
    schema: {
      width: { type: 'number', default: 1 },
      height: { type: 'number', default: 1 },
      depth: { type: 'number', default: 1 },

      topLeftRadius: { type: 'number', default: 0.00001 },
      topRightRadius: { type: 'number', default: 0.00001 },
      bottomLeftRadius: { type: 'number', default: 0.00001 },
      bottomRightRadius: { type: 'number', default: 0.00001 },

      bevelEnabled: { type: 'boolean', default: true },
      bevelSegments: { type: 'number', default: 2 },
      steps: { type: 'number', default: 1 },
      bevelSize: { type: 'number', default: 0.1 },
      bevelOffset: { type: 'number', default: 0 },
      bevelThickness: { type: 'number', default: 0.1 }
    },

    multiple: false,

    init: function () {
      var el = this.el;
      var data = this.data;

      var _w = data.width;
      var _h = data.height;
      var _x = -data.width / 2;
      var _y = -data.height / 2;

      var shape = new THREE.Shape();
      shape.moveTo(_x, _y + data.topLeftRadius);
      shape.lineTo(_x, _y + _h - data.topLeftRadius);
      shape.quadraticCurveTo(_x, _y + _h, _x + data.topLeftRadius, _y + _h);
      shape.lineTo(_x + _w - data.topRightRadius, _y + _h);
      shape.quadraticCurveTo(_x + _w, _y + _h, _x + _w, _y + _h - data.topRightRadius);
      shape.lineTo(_x + _w, _y + data.bottomRightRadius);
      shape.quadraticCurveTo(_x + _w, _y, _x + _w - data.bottomRightRadius, _y);
      shape.lineTo(_x + data.bottomLeftRadius, _y);
      shape.quadraticCurveTo(_x, _y, _x, _y + data.bottomLeftRadius);

      var extrudedShape = this.extrude(shape);

      el.setObject3D('mesh', extrudedShape);
    },

    extrude: function (roundedBase) {
      var el = this.el;
      var data = this.data;

      var extrudeSettings = {
        steps: data.steps,
        depth: data.depth,
        bevelEnabled: data.bevelEnabled,
        bevelThickness: data.bevelThickness,
        bevelSize: data.bevelSize,
        bevelOffset: data.bevelOffset,
        bevelSegments: data.bevelSegments
      };

      var extrudedGeometry = new THREE.ExtrudeGeometry(roundedBase, extrudeSettings);
      return new THREE.Mesh(extrudedGeometry, new THREE.MeshStandardMaterial({
        side: THREE.DoubleSide
      }));
    },

    /**
     * Called when component is attached and when component data changes.
     * Generally modifies the entity based on the data.
     */
    update: function (oldData) { },

    /**
     * Called when a component is removed (e.g., via removeAttribute).
     * Generally undoes all modifications to the entity.
     */
    remove: function () { },

    /**
     * Called on each scene tick.
     */
    // tick: function (t) { },

    /**
     * Called when entity pauses.
     * Use to stop or remove any dynamic or background behavior such as events.
     */
    pause: function () { },

    /**
     * Called when entity resumes.
     * Use to continue or add any dynamic or background behavior such as events.
     */
    play: function () { }
  });
}