"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Box = _interopRequireDefault(require("../../components/Box"));

var _Flex = _interopRequireDefault(require("../../components/Flex"));

var _Title = _interopRequireDefault(require("../../components/Title"));

var _Button = _interopRequireDefault(require("../../components/Button"));

var _Range = _interopRequireDefault(require("../../components/Range"));

var _illustration = _interopRequireDefault(require("./illustration"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function MetricsPricingWidget(_ref) {
  var cta = _ref.cta,
      link = _ref.link,
      title = _ref.title,
      props = (0, _objectWithoutProperties2["default"])(_ref, ["cta", "link", "title"]);

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      logsLimit = _useState2[0],
      setLogsLimit = _useState2[1];

  var _useState3 = (0, _react.useState)(''),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      retentionPolicy = _useState4[0],
      setRetentionPolicy = _useState4[1];

  var _useState5 = (0, _react.useState)(''),
      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
      detailsText = _useState6[0],
      setDetailsText = _useState6[1];

  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    className: "MetricsPricingWidget",
    style: {
      borderTopLeftRadius: 7,
      borderBottomLeftRadius: 7,
      marginBottom: 40
    }
  }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
    align: "center"
  }, /*#__PURE__*/_react["default"].createElement(_illustration["default"], {
    style: {
      flex: '1 38%',
      margin: '-1em 0 -1em -1em'
    },
    width: 500
  }), /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      flex: '1 38%'
    }
  }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
    level: 3,
    style: {
      margin: '0 0 1rem'
    }
  }, title), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    href: link,
    style: {
      lineHeight: 1.9
    }
  }, /*#__PURE__*/_react["default"].createElement("b", null, cta))), /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      flex: '1 25%',
      position: 'relative'
    }
  }, /*#__PURE__*/_react["default"].createElement(_Range["default"], {
    defaultValue: props.defaultValue,
    list: "log-pricing-options",
    max: props.max,
    min: props.min,
    options: props.options,
    step: props.step,
    style: {
      '--bgc': '#F8F8F8',
      marginTop: 0
    },
    updateInfo: function updateInfo(opt) {
      /* istanbul ignore next */
      setDetailsText(opt ? opt.getAttribute('details') : '');
      /* istanbul ignore next */

      setLogsLimit(opt ? opt.getAttribute('logs') : '');
      /* istanbul ignore next */

      setRetentionPolicy(opt ? opt.getAttribute('retained') : '');
    }
  }, /*#__PURE__*/_react["default"].createElement("datalist", {
    id: "log-pricing-options"
  }, !props.labels || Object.keys(props.labels).map(function (value, i) {
    return /*#__PURE__*/_react["default"].createElement("option", (0, _extends2["default"])({
      key: "log-pricing-options-".concat(i)
    }, _objectSpread({
      value: value
    }, props.labels[value])));
  }), props.children)), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
    justify: "start",
    style: {
      position: 'absolute',
      marginTop: '.4em',
      lineHeight: 1.4
    }
  }, !detailsText ||
  /*#__PURE__*/

  /* istanbul ignore next */
  _react["default"].createElement("span", {
    dangerouslySetInnerHTML: {
      __html: detailsText
    }
  }), !logsLimit || /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("small", {
    style: {
      display: 'block'
    }
  }, "Logs"), /*#__PURE__*/_react["default"].createElement("b", {
    style: {
      color: '#118cfd'
    }
  }, logsLimit)), !retentionPolicy || /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("small", {
    style: {
      display: 'block'
    }
  }, "Retention"), /*#__PURE__*/_react["default"].createElement("b", {
    style: {
      color: '#118cfd'
    }
  }, retentionPolicy))))));
}

MetricsPricingWidget.propTypes = {
  cta: _propTypes["default"].string,
  defaultValue: _propTypes["default"].number,
  labels: _propTypes["default"].object,
  link: _propTypes["default"].string,
  max: _propTypes["default"].number,
  min: _propTypes["default"].number,
  options: _propTypes["default"].object,
  step: _propTypes["default"].number,
  title: _propTypes["default"].string
};
MetricsPricingWidget.defaultProps = {
  cta: 'Sign Up for Developer Metrics',
  defaultValue: 0,
  link: 'https://dash.readme.io/signup',
  max: 1100,
  min: -50,
  options: {
    showMarks: 13.35,
    roundLabels: 100,
    limit: {
      lower: -1
    }
  },
  step: 1,
  title: 'Insights in to how developers are using your API.'
};
var _default = MetricsPricingWidget;
exports["default"] = _default;