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

import Box from '@ui/components/Box';
import Flex from '@ui/components/Flex';
import Title from '@ui/components/Title';
import Button from '@ui/components/Button';
import Range from '@ui/components/Range';

import SVG from './illustration';

function MetricsPricingWidget({ cta, link, title, ...props }) {
  const [logsLimit, setLogsLimit] = useState('');
  const [retentionPolicy, setRetentionPolicy] = useState('');
  const [detailsText, setDetailsText] = useState('');

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