'use strict';

var slicedToArray = require('./slicedToArray-067dd3bc.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('./index-0e4427c8.js');
var visibilitySensor = require('./visibility-sensor-eb2c5b69.js');
var debounce = require('./debounce-d4a2369b.js');
require('./_commonjsHelpers-06173234.js');
require('./web.dom.iterable-d98303e0.js');
require('./core.get-iterator-method-5643aa10.js');
require('react-dom');
require('./isSymbol-03abbdf0.js');
require('./toNumber-5e1fac58.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

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

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

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

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

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

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

AD.propTypes = {
  networkID: PropTypes__default['default'].string.isRequired,
  adUnit: PropTypes__default['default'].string.isRequired,
  slotId: PropTypes__default['default'].string,
  className: PropTypes__default['default'].string,
  sizeMapping: PropTypes__default['default'].array,
  sizes: PropTypes__default['default'].array,
  minInViewPercent: PropTypes__default['default'].number
};

exports.default = AD;
