"use strict";

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

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

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

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

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

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 = ["textureFormat", "src", "videoLoop", "onClick"];

function toSkyProps(_ref) {
  var color = _ref.color,
      metalness = _ref.metalness,
      opacity = _ref.opacity,
      phiLength = _ref.phiLength,
      phiStart = _ref.phiStart,
      radius = _ref.radius,
      repeat = _ref.repeat,
      roughness = _ref.roughness,
      segmentsHeight = _ref.segmentsHeight,
      segmentsWidth = _ref.segmentsWidth,
      shader = _ref.shader,
      side = _ref.side,
      thetaLength = _ref.thetaLength,
      thetaStart = _ref.thetaStart,
      transparent = _ref.transparent;
  return (0, _extends2.default)({}, color && {
    color: color
  }, metalness && {
    metalness: metalness
  }, opacity && {
    opacity: opacity
  }, phiLength && {
    'phi-length': phiLength
  }, phiStart && {
    'phi-start': phiStart
  }, radius && {
    radius: radius
  }, repeat && {
    repeat: new _components.Vec2(repeat).toString()
  }, roughness && {
    roughness: roughness
  }, segmentsHeight && {
    'segments-height': segmentsHeight
  }, segmentsWidth && {
    'segments-width': segmentsWidth
  }, shader && {
    shader: shader
  }, side && {
    side: side
  }, thetaLength && {
    'theta-length': thetaLength
  }, thetaStart && {
    'theta-start': thetaStart
  }, transparent && {
    transparent: transparent
  });
}
/**
 * The sky primitive adds a background color or 360° image to a scene.
 * A sky is a large sphere with a color or texture mapped to the inside.
 *
 * @see https://aframe.io/docs/1.3.0/primitives/a-sky.html
 *
 * @example
 * An equirectangular image as a background:
 *
 * ```tsx
 * <Scene>
 *   <Assets>
 *     <img id="sky" src="sky.png" />
 *   </Assets>
 *   <Sky src="#sky" />
 * </Scene>
 * ```
 *
 * A plain color as a background:
 *
 * ```tsx
 * <Sky color="#6EBAA7" />
 * ```
 */


var Sky = function Sky(props) {
  var skyKeys = ['color', 'metalness', 'opacity', 'phiLength', 'phiStart', 'radius', 'repeat', 'roughness', 'segmentsHeight', 'segmentsWidth', 'shader', 'side', // 'src',
  'thetaLength', 'thetaStart', 'transparent'];
  var _props$textureFormat = props.textureFormat,
      textureFormat = _props$textureFormat === void 0 ? 'image' : _props$textureFormat,
      src = props.src,
      videoLoop = props.videoLoop,
      onClick = props.onClick,
      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);

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

  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.CreateAsset, null, textureFormat === 'image' ? /*#__PURE__*/_react.default.createElement("img", {
    id: randId,
    alt: randId,
    src: src,
    crossOrigin: "anonymous"
  }) : /*#__PURE__*/_react.default.createElement("video", {
    id: randId,
    src: src,
    loop: videoLoop
  })), /*#__PURE__*/_react.default.createElement(_EventListener.default, (0, _extends2.default)({
    primitive: "a-sky",
    src: "#" + randId,
    events: {
      click: function click() {
        if (onClick) {
          onClick();
        }
      }
    }
  }, (0, _core.toProps)(restProps, skyKeys), toSkyProps(restProps))));
};

exports.Sky = Sky;