import _getOr from "lodash/fp/getOr";
import React from 'react';
import PropTypes from 'prop-types';
import stopPropagation from '../../util/bubbling';
import Provider from '../../atom/provider';
import Button from '../../atom/button';
import style from './style.css';
const Popin = (props, context) => {
  const {
    skin
  } = context;
  const {
    ctaLabel,
    ctaOnClick,
    header,
    closeOnClick,
    content
  } = props;
  function createMarkup() {
    return {
      __html: content
    };
  }
  const primary = _getOr('#00B0FF', ['common', 'primary'], skin);
  return /*#__PURE__*/React.createElement("div", {
    className: style.defaultStyle,
    onClick: closeOnClick
  }, /*#__PURE__*/React.createElement("div", {
    className: style.popin,
    onClick: stopPropagation
  }, /*#__PURE__*/React.createElement("div", {
    className: style.header,
    onClick: closeOnClick,
    "data-name": "popin-header"
  }, header), /*#__PURE__*/React.createElement("div", {
    className: style.content
  }, /*#__PURE__*/React.createElement("div", {
    // eslint-disable-next-line react/no-danger
    dangerouslySetInnerHTML: createMarkup()
  })), /*#__PURE__*/React.createElement(Button, {
    type: "link",
    className: style.button,
    onClick: ctaOnClick,
    submitValue: ctaLabel,
    centered: true,
    style: {
      backgroundColor: primary
    }
  })));
};
Popin.contextTypes = {
  skin: Provider.childContextTypes.skin
};
Popin.propTypes = process.env.NODE_ENV !== "production" ? {
  ctaLabel: PropTypes.string,
  ctaOnClick: PropTypes.func,
  closeOnClick: PropTypes.func,
  header: PropTypes.string,
  content: PropTypes.string
} : {};
export default Popin;
//# sourceMappingURL=index.js.map