import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["children", "onClick", "onMouseEnter", "onMouseLeave", "obj", "mtl"];
import React, { Fragment, useId } from 'react';
import { toProps, CreateAsset, AssetItem } from '../core';
import EventListener from '../event/EventListener';
var PREFIX_ASSET = 'model';

/**
 * > We recommend glTF for distributing assets in production over the web.
 * > Check out using the [glTF model primitive](https://aframe.io/docs/1.3.0/primitives/a-gltf-model.html).
 * > You can either instead export to COLLADA and
 * > use [the converter](https://cesiumjs.org/convertmodel.html) or try out the [OBJ converter](https://github.com/AnalyticalGraphicsInc/OBJ2GLTF).
 *
 * The .OBJ model primitive displays a 3D Wavefront model.
 *
 * @see https://aframe.io/docs/1.3.0/primitives/a-obj-model.html
 *
 * @example
 * ```tsx
 * <Scene>
 *   <Assets>
 *     <AssetItem id="crate-obj" src="crate.obj" />
 *     <AssetItem id="crate-mtl" src="crate.mtl" />
 *   </Assets>
 *
 *   // Using the asset management system.
 *   <ObjModel src="#crate-obj" mtl="#crate-mtl" />
 *
 *   // Defining the URL inline. Not recommended but may be more comfortable.
 *   <ObjModel src="crate.obj" mtl="crate.mtl" />
 * </Scene>
 * ```
 */
export var ObjModel = function ObjModel(props) {
  var children = props.children,
      onClick = props.onClick,
      onMouseEnter = props.onMouseEnter,
      onMouseLeave = props.onMouseLeave,
      obj = props.obj,
      mtl = props.mtl,
      restProps = _objectWithoutPropertiesLoose(props, _excluded);

  var uid = useId();
  var objId = "" + PREFIX_ASSET + uid + "obj";
  var mtlId = "" + PREFIX_ASSET + uid + "mtl";
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CreateAsset, null, /*#__PURE__*/React.createElement(AssetItem, {
    id: objId,
    src: obj
  }), /*#__PURE__*/React.createElement(AssetItem, {
    id: mtlId,
    src: mtl
  })), /*#__PURE__*/React.createElement(EventListener, _extends({
    primitive: "a-obj-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, ['mtl', 'obj']), {
    mtl: "#" + mtlId,
    src: "#" + objId
  }), children));
};