'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Box = require('../../components/Box');

var _Box2 = _interopRequireDefault(_Box);

var _Flex = require('../../components/Flex');

var _Flex2 = _interopRequireDefault(_Flex);

var _Title = require('../../components/Title');

var _Title2 = _interopRequireDefault(_Title);

var _Button = require('../../components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Range = require('../../components/Range');

var _Range2 = _interopRequireDefault(_Range);

var _illustration = require('./illustration');

var _illustration2 = _interopRequireDefault(_illustration);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function MetricsPricingWidget(_ref) {
  var cta = _ref.cta,
      link = _ref.link,
      title = _ref.title,
      props = _objectWithoutProperties(_ref, ['cta', 'link', 'title']);

  var _useState = (0, _react.useState)(''),
      logsLimit = _useState[0],
      setLogsLimit = _useState[1];

  var _useState2 = (0, _react.useState)(''),
      retentionPolicy = _useState2[0],
      setRetentionPolicy = _useState2[1];

  var _useState3 = (0, _react.useState)(''),
      detailsText = _useState3[0],
      setDetailsText = _useState3[1];

  return _react2.default.createElement(
    _Box2.default,
    {
      className: 'MetricsPricingWidget',
      style: { borderTopLeftRadius: 7, borderBottomLeftRadius: 7, marginBottom: 40 }
    },
    _react2.default.createElement(
      _Flex2.default,
      { align: 'center' },
      _react2.default.createElement(_illustration2.default, { style: { flex: '1 38%', margin: '-1em 0 -1em -1em' }, width: 500 }),
      _react2.default.createElement(
        'div',
        { style: { flex: '1 38%' } },
        _react2.default.createElement(
          _Title2.default,
          { level: 3, style: { margin: '0 0 1rem' } },
          title
        ),
        _react2.default.createElement(
          _Button2.default,
          { href: link, style: { lineHeight: 1.9 } },
          _react2.default.createElement(
            'b',
            null,
            cta
          )
        )
      ),
      _react2.default.createElement(
        'div',
        { style: { flex: '1 25%', position: 'relative' } },
        _react2.default.createElement(
          _Range2.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') : '');
            }
          },
          _react2.default.createElement(
            'datalist',
            { id: 'log-pricing-options' },
            !props.labels || Object.keys(props.labels).map(function (value, i) {
              return _react2.default.createElement('option', _extends({ key: 'log-pricing-options-' + i }, _extends({ value: value }, props.labels[value])));
            }),
            props.children
          )
        ),
        _react2.default.createElement(
          _Flex2.default,
          { justify: 'start', style: { position: 'absolute', marginTop: '.4em', lineHeight: 1.4 } },
          !detailsText || /* istanbul ignore next */_react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: detailsText } }),
          !logsLimit || _react2.default.createElement(
            'span',
            null,
            _react2.default.createElement(
              'small',
              { style: { display: 'block' } },
              'Logs'
            ),
            _react2.default.createElement(
              'b',
              { style: { color: '#118cfd' } },
              logsLimit
            )
          ),
          !retentionPolicy || _react2.default.createElement(
            'span',
            null,
            _react2.default.createElement(
              'small',
              { style: { display: 'block' } },
              'Retention'
            ),
            _react2.default.createElement(
              'b',
              { style: { color: '#118cfd' } },
              retentionPolicy
            )
          )
        )
      )
    )
  );
}
MetricsPricingWidget.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: _propTypes2.default.string,
  defaultValue: _propTypes2.default.number,
  labels: _propTypes2.default.object,
  link: _propTypes2.default.string,
  max: _propTypes2.default.number,
  min: _propTypes2.default.number,
  options: _propTypes2.default.object,
  step: _propTypes2.default.number,
  title: _propTypes2.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.'
};

exports.default = MetricsPricingWidget;
module.exports = exports['default'];