import classnames from 'classnames';
import PropTypes from 'prop-types';
import CustomPropTypes from "../../../utils/prop-types/index.js";
import customizable from "../../../utils/css/customizable.js";
import getMarginClasses from "../../../utils/css/getMarginClasses.js";
import { useResponsiveValues } from "../../../hooks/breakpoint/index.js";
import cx from "../../../utils/css/cx.js";
import useCustomAd from './useCustomAd';
import resolveAdType from './resolveAdType';
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * Programmatic advertisements generated by our ad manager (the actual ads
 * won't show in Storybook). In general we tend to include a `leaderboard` ad
 * at the top of a story above the navigation and `supercube` ads throughout
 * the body of a story.
 *
 * ```js
 *
 * import { Ad } from '@politico/interactive-style';
 * ```
 */
const Ad = function Ad(props) {
  const {
    type: propType,
    alwaysDisplayPlaceholder,
    margin
  } = props;
  const type = resolveAdType(propType);
  const id = useCustomAd({
    type
  });
  const placeholderActive = alwaysDisplayPlaceholder || !id;
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue, {
    defaultSide: 'y',
    sides: ['y', 't', 'b']
  });
  return <div className={cls(customizable('Ad'), 'container', type, margins)}>
      <p className={classnames(customizable('Ad__disclaimer'), classes.disclaimer)}>
        Advertisement
      </p>
      <div className={classnames(customizable('Ad__placeholder'), classes.placeholder, classes[`placeholder-${type}`], {
      [classes.active]: placeholderActive
    })} />
      <div id={id} className={classnames(customizable('Ad__mount'), classes.mount, classes[`mount-${type}`], {
      [classes.active]: !placeholderActive
    })} />
    </div>;
};
Ad.defaultProps = {
  type: 'banner_btf',
  alwaysDisplayPlaceholder: false,
  margin: undefined
};
Ad.propTypes = {
  /**
   * What type of ad to call for. In our old ad type naming convention,
   * `banner` corresponds to `leaderboard`, `banner_btf` corresponds to
   * `supercube`, and `mrec-small_btf` corresponds to `cube`.
   */
  type: PropTypes.oneOf(['banner', 'banner_btf', 'mrec-small_btf']),
  /**
   * An option to keep the placeholder even if the ad is mounted
   */
  alwaysDisplayPlaceholder: PropTypes.bool,
  /**
   * The vertical margins of the Ad. Margins can be specified as one
   * spacing value that gets used on both top and bottom, an explicit `y`
   * value, or completely separate `tb` values. The values correspond to levels
   * of our spacing scale (e.g., `"4"` corresponds to `$spacing-4`). Note that
   * grid items do not support custom horizontal margins.
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    b: PropTypes.string
  })]))
};
export default Ad;