import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-a4107da3.js';
import './es6.string.iterator-c990c18c.js';
import './core.get-iterator-method-e1de7503.js';
import './web.dom.iterable-4439f05a.js';
import React, { useState } from 'react';
import { b as lib_1, a as lib_2 } from './index-acfb8079.js';
import PropTypes from 'prop-types';
import './isSymbol-1981418f.js';
import { d as debounce_1 } from './debounce-9207d8ee.js';
import './toNumber-2f7a84cd.js';
import 'react-dom';
import { V as VisibilitySensor } from './visibility-sensor-f40c2564.js';
import { _ as _slicedToArray } from './slicedToArray-641f241f.js';

var AD = function AD(_ref) {
  var networkID = _ref.networkID,
      adUnit = _ref.adUnit,
      sizeMapping = _ref.sizeMapping,
      className = _ref.className,
      slotId = _ref.slotId,
      sizes = _ref.sizes,
      minInViewPercent = _ref.minInViewPercent,
      _ref$targeting = _ref.targeting,
      targeting = _ref$targeting === undefined ? {} : _ref$targeting;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      adRendered = _useState2[0],
      setAdRendered = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      showPlaceholder = _useState4[0],
      setShowPlaceholder = _useState4[1];

  var handleVisibilityChange = debounce_1(function (_ref2) {
    var event = _ref2.event;

    if (event.inViewPercentage <= 0) {
      setShowPlaceholder(true);
    }
  }, 500);

  return React.createElement(
    React.Fragment,
    null,
    !showPlaceholder && React.createElement(
      lib_1,
      {
        dfpNetworkId: networkID,
        targetingArguments: targeting,
        sizeMapping: sizeMapping,
        lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
      React.createElement(
        'div',
        { className: className },
        React.createElement(lib_2, {
          slotId: slotId,
          sizes: sizes,
          adUnit: adUnit,
          sizeMapping: sizeMapping,
          onSlotRender: function onSlotRender(eventData) {
            setAdRendered(true);
          },
          onSlotVisibilityChanged: handleVisibilityChange
        })
      )
    ),
    adRendered && showPlaceholder && React.createElement(
      VisibilitySensor,
      {
        partialVisibility: true,
        onChange: function onChange(isVisible) {
          if (isVisible) {
            setShowPlaceholder(false);
          }
        } },
      React.createElement(
        'div',
        { style: { height: 'auto' } },
        '\xA0'
      )
    )
  );
};

AD.propTypes = {
  networkID: PropTypes.string.isRequired,
  adUnit: PropTypes.string.isRequired,
  slotId: PropTypes.string,
  className: PropTypes.string,
  sizeMapping: PropTypes.array,
  sizes: PropTypes.array,
  minInViewPercent: PropTypes.number
};

export default AD;
