import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["src", "onClick", "onMouseEnter", "onMouseLeave", "AnimationMixerClip", "AnimationMixerDuration", "AnimationMixerClampWhenFinished", "AnimationMixerCrossFadeDuration", "AnimationMixerLoop", "AnimationMixerRepetitions", "AnimationMixerTimeScale", "AnimationMixerStartFrame"];
import React, { Fragment, useId, useCallback } from 'react';
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,
      _props$AnimationMixer = props.AnimationMixerClip,
      AnimationMixerClip = _props$AnimationMixer === void 0 ? '*' : _props$AnimationMixer,
      AnimationMixerDuration = props.AnimationMixerDuration,
      AnimationMixerClampWhenFinished = props.AnimationMixerClampWhenFinished,
      AnimationMixerCrossFadeDuration = props.AnimationMixerCrossFadeDuration,
      AnimationMixerLoop = props.AnimationMixerLoop,
      AnimationMixerRepetitions = props.AnimationMixerRepetitions,
      AnimationMixerTimeScale = props.AnimationMixerTimeScale,
      AnimationMixerStartFrame = props.AnimationMixerStartFrame,
      restProps = _objectWithoutPropertiesLoose(props, _excluded);

  var uid = useId();
  var gltfId = "" + PREFIX_ASSET + uid + "gltf";
  var toAnimationMixer = useCallback(function () {
    var compose = _extends({}, AnimationMixerClip && {
      clip: AnimationMixerClip
    }, AnimationMixerDuration && {
      duration: AnimationMixerDuration
    }, AnimationMixerClampWhenFinished && {
      clampWhenFinished: AnimationMixerClampWhenFinished
    }, AnimationMixerCrossFadeDuration && {
      crossFadeDuration: AnimationMixerCrossFadeDuration
    }, AnimationMixerLoop && {
      loop: AnimationMixerLoop
    }, AnimationMixerRepetitions && {
      repetitions: AnimationMixerRepetitions
    }, AnimationMixerTimeScale && {
      timeScale: AnimationMixerTimeScale
    }, AnimationMixerStartFrame && {
      startFrame: AnimationMixerStartFrame
    });

    return Object.entries(compose).map(function (_ref) {
      var key = _ref[0],
          value = _ref[1];
      return key + ": " + value.toString();
    }).join(';');
  }, [AnimationMixerClip, AnimationMixerDuration, AnimationMixerClampWhenFinished, AnimationMixerCrossFadeDuration, AnimationMixerLoop, AnimationMixerRepetitions, AnimationMixerTimeScale, AnimationMixerStartFrame]);
  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), {
    "animation-mixer": toAnimationMixer(),
    src: "#" + gltfId
  })));
};