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; };

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; }

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import Box from '../../components/Box';
import Flex from '../../components/Flex';
import Title from '../../components/Title';
import Button from '../../components/Button';
import Range from '../../components/Range';

import SVG from './illustration';

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

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

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

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

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

export default MetricsPricingWidget;