import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["src"];
import React, { Fragment, useState } from 'react';
import { Vec2 } from '../components';
import { toProps, CreateAsset } from '../core';
import EventListener from '../event/EventListener';
import { randomId } from '../utils/randomId';

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 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>
 * ```
 */


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

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

  var src = props.src,
      restProps = _objectWithoutPropertiesLoose(props, _excluded);

  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CreateAsset, null, /*#__PURE__*/React.createElement("img", {
    id: randId,
    alt: "plane",
    crossOrigin: "anonymous",
    src: src
  })), /*#__PURE__*/React.createElement(EventListener, _extends({
    primitive: "a-image",
    src: "#" + randId
  }, toProps(restProps, imageKeys), toImageProps(props))));
};