"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

exports.__esModule = true;
exports.Image = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _components = require("../components");

var _core = require("../core");

var _EventListener = _interopRequireDefault(require("../event/EventListener"));

var _randomId = require("../utils/randomId");

var _excluded = ["src"];

function toImageProps(_ref) {
  var color = _ref.color,
      height = _ref.height,
      metalness = _ref.metalness,
      opacity = _ref.opacity,
      repeat = _ref.repeat,
      roughness = _ref.roughness,
      segmentsHeight = _ref.segmentsHeight,
      segmentsWidth = _ref.segmentsWidth,
      shader = _ref.shader,
      side = _ref.side,
      transparent = _ref.transparent,
      width = _ref.width;
  return {
    color: color,
    height: height,
    metalness: metalness,
    opacity: opacity,
    repeat: repeat && new _components.Vec2(repeat).toString(),
    roughness: roughness,
    'segments-height': segmentsHeight,
    'segments-width': segmentsWidth,
    shader: shader,
    side: side,
    // src,
    transparent: transparent,
    width: width
  };
}
/**
 * The image primitive shows an image on a flat plane.
 *
 * @see https://aframe.io/docs/1.3.0/primitives/a-image.html
 *
 * @example
 * ```tsx
 * <Scene>
 *   <Assets>
 *     <img id="my-image" src="image.png" />
 *   </Assets>
 *
 *   // Using the asset management system.
 *   <Image src="#my-image" />
 *
 *   // Defining the URL inline. Not recommended but more comfortable for web developers.
 *   <Image src="another-image.png" />
 * </Scene>
 * ```
 */


var Image = function Image(props) {
  var imageKeys = ['color', 'height', 'metalness', 'opacity', 'repeat', 'roughness', 'segmentsHeight', 'segmentsWidth', 'shader', 'side', // 'src',
  'transparent', 'width'];

  var _useState = (0, _react.useState)((0, _randomId.randomId)('image')),
      randId = _useState[0];

  var src = props.src,
      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.CreateAsset, null, /*#__PURE__*/_react.default.createElement("img", {
    id: randId,
    alt: "plane",
    crossOrigin: "anonymous",
    src: src
  })), /*#__PURE__*/_react.default.createElement(_EventListener.default, (0, _extends2.default)({
    primitive: "a-image",
    src: "#" + randId
  }, (0, _core.toProps)(restProps, imageKeys), toImageProps(props))));
};

exports.Image = Image;