import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
var _excluded = ["textureFormat", "src", "videoLoop", "onClick"];

/* eslint-disable jsx-a11y/media-has-caption */
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 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 _extends({}, color && {
    color: color
  }, metalness && {
    metalness: metalness
  }, opacity && {
    opacity: opacity
  }, phiLength && {
    'phi-length': phiLength
  }, phiStart && {
    'phi-start': phiStart
  }, radius && {
    radius: radius
  }, repeat && {
    repeat: new 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" />
 * ```
 */


export 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 = _objectWithoutPropertiesLoose(props, _excluded);

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

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