import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["src", "onClick", "onMouseEnter", "onMouseLeave"];

/* eslint-disable no-param-reassign */

/* eslint-disable @typescript-eslint/ban-ts-comment */
import React, { Fragment, useId } from 'react';
import AFRAME from 'aframe';
import { toProps, CreateAsset, AssetItem } from '../core';
import EventListener from '../event/EventListener';
var PREFIX_ASSET = 'model';

/**
 * The glTF model primitive displays a 3D glTF model
 * created from a 3D modeling program or downloaded from the web.
 *
 * @see https://aframe.io/docs/master/primitives/a-gltf-model.html
 *
 * @example
 * ```tsx
 * <Scene>
 *   <Assets>
 *     <AssetItem id="tree" src="tree.gltf" />
 *   </Assets>
 *
 *   // Using the asset management system.
 *   <GLTFModel src="#tree" />
 *
 *   // Defining the URL inline.
 *   // Not recommended but more comfortable for web developers.
 *   <GLTFModel src="tree.gltf" />
 * </Scene>
 * ```
 */
export var GLTFModel = function GLTFModel(props) {
  var src = props.src,
      onClick = props.onClick,
      onMouseEnter = props.onMouseEnter,
      onMouseLeave = props.onMouseLeave,
      restProps = _objectWithoutPropertiesLoose(props, _excluded);

  var uid = useId();
  var gltfId = "" + PREFIX_ASSET + uid + "gltf";
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CreateAsset, null, /*#__PURE__*/React.createElement(AssetItem, {
    id: gltfId,
    src: src
  })), /*#__PURE__*/React.createElement(EventListener, _extends({
    primitive: "a-gltf-model",
    events: {
      click: function click() {
        if (onClick) {
          onClick();
        }
      },
      mouseenter: function mouseenter() {
        if (onClick) {
          var canvas = window.document.querySelector('canvas.a-canvas');
          canvas.style.cursor = 'pointer';
        }

        if (onMouseEnter) {
          onMouseEnter();
        }
      },
      mouseleave: function mouseleave() {
        if (onClick) {
          var canvas = window.document.querySelector('canvas.a-canvas');
          canvas.style.cursor = 'grab';
        }

        if (onMouseLeave) {
          onMouseLeave();
        }
      }
    }
  }, toProps(restProps), {
    src: "#" + gltfId
  })));
};
AFRAME.registerComponent('activeAnimation', {
  init: function init() {
    var _this = this;

    // wait for the model to load
    this.el.addEventListener('model-loaded', function () {
      // create new material - with it skinning flag raised
      // @ts-ignore
      var newMaterial = new window.THREE.MeshNormalMaterial({
        skinning: true
      });

      var mesh = _this.el.getObject3D('mesh'); // traverse the mesh and apply the material


      mesh.traverse(function (node) {
        // @ts-ignore
        if (!node.isMesh) return; // @ts-ignore

        node.material = newMaterial; // @ts-ignore

        node.material.needsUpdate = true;
      });
    });
  }
});