import React from 'react';
import PropTypes from 'prop-types';
import parse from 'react-html-parser';
import './style.css';

var formatPhoneNumber = function formatPhoneNumber(number) {
  var clean = number.replace(/\D/g, '');
  var match = clean.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    var intlCode = match[1] ? '+1 ' : '';
    return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
  }
  return null;
};

var PhoneNumber = function PhoneNumber(props) {
  var number = props.number,
      details = props.details;

  var display = formatPhoneNumber(number);
  return React.createElement(
    'span',
    { className: 'ma__phone-number' },
    React.createElement(
      'a',
      { href: 'tel:' + number, className: 'ma__phone-number__number' },
      display
    ),
    details && React.createElement(
      'p',
      { className: 'ma__contact__details' },
      parse(details)
    )
  );
};

PhoneNumber.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The phone number. Expect the following +16174659898 or 6174659898 */
  number: PropTypes.string.isRequired,
  /** Details around contacting the provided phone number */
  details: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
} : {};

export default PhoneNumber;