"use strict";

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

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

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

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

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

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

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

function toCurvedImageProps(_ref) {
  var color = _ref.color,
      height = _ref.height,
      metalness = _ref.metalness,
      opacity = _ref.opacity,
      openEnded = _ref.openEnded,
      radius = _ref.radius,
      repeat = _ref.repeat,
      roughness = _ref.roughness,
      segmentsHeight = _ref.segmentsHeight,
      segmentsRadial = _ref.segmentsRadial,
      shader = _ref.shader,
      side = _ref.side,
      src = _ref.src,
      thetaLength = _ref.thetaLength,
      thetaStart = _ref.thetaStart,
      transparent = _ref.transparent;
  return {
    color: color,
    height: height,
    metalness: metalness,
    opacity: opacity,
    'open-ended': openEnded,
    radius: radius,
    repeat: repeat && new _components.Vec2(repeat).toString(),
    roughness: roughness,
    'segments-height': segmentsHeight,
    'segments-radial': segmentsRadial,
    shader: shader,
    side: side,
    src: src,
    'theta-length': thetaLength,
    'theta-start': thetaStart,
    transparent: transparent
  };
}
/**
 * The curved image primitive creates images that bend around the user.
 * Curved images arranged around the camera can be pleasing for legibility since
 * each pixel sits at the same distance from the user.
 * They can be a better choice than angled flat planes for complex layouts because
 * they ensure a smooth surface rather than a series of awkward seams between planes.
 *
 * Under the hood, a curved image is a double-sided open-ended cylinder with
 * textures mapped to the inside of the cylinder.
 *
 * @see https://aframe.io/docs/1.3.0/primitives/a-curvedimage.html
 *
 * @example
 * ```tsx
 * <Scene>
 *   <Assets>
 *     <img id="my-image" src="image.png" />
 *   </Assets>
 *
 *   // Using the asset management system.
 *   <CurvedImage
 *     src="#my-image"
 *     height={3.0}
 *     radius={5.7}
 *     theta-length={72}
 *     rotation={{
 *       x: 0,
 *       y: 100,
 *       z: 0,
 *     }}
 *     scale={{
 *       x: 0.8,
 *       y: 0.8,
 *       z: 0.8,
 *     }}
 *   />
 *
 *   // Defining the URL inline. Not recommended but more comfortable for web developers.
 *   <CurvedImage src="another-image.png" />
 * </Scene>
 * ```
 */


var CurvedImage = function CurvedImage(props) {
  var curvedImageKeys = ['color', 'height', 'metalness', 'opacity', 'openEnded', 'radius', 'repeat', 'roughness', 'segmentsHeight', 'segmentsRadial', 'shader', 'side', 'src', 'thetaLength', 'thetaStart', 'transparent'];
  var children = props.children;
  return /*#__PURE__*/_react.default.createElement(_EventListener.default, (0, _extends2.default)({
    primitive: "a-curvedimage"
  }, (0, _core.toProps)(props, curvedImageKeys), toCurvedImageProps(props)), children);
};

exports.CurvedImage = CurvedImage;