const _excluded = ["title", "name", "email", "phone", "division", "otherDetails", "className", "children"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { ReactComponent as PhoneIcon } from "../../img/phone.svg";
import { ReactComponent as MailIcon } from "../../img/mail.svg";
import { ReactComponent as PersonIcon } from "../../img/person.svg";
import formatPhone from "../../utils/formatPhone";
const useStyles = makeStyles(theme => {
  return {
    row: {
      minWidth: 250,
      alignItems: "center",
      display: "grid",
      gridTemplateColumns: "1fr 11fr",
      gap: 4
    },
    icon: {
      height: 24,
      width: 24,
      "& svg": {
        height: "100%",
        width: "100%"
      }
    },
    card: {
      flex: 1,
      border: "1px solid #ddd",
      padding: theme.spacing(1),
      margin: "".concat(theme.spacing(1), " 0"),
      borderRadius: 2
    }
  };
});
const validatePhone = string => /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/.test(string);
function PersonCard(_ref) {
  let {
      title,
      name,
      email,
      phone,
      division,
      otherDetails = [],
      className = "",
      children
    } = _ref,
    props = _objectWithoutProperties(_ref, _excluded);
  const classes = useStyles();
  const formattedPhone = useMemo(() => formatPhone(phone), [phone]);
  return /*#__PURE__*/React.createElement("div", _extends({
    key: "".concat(title, "-").concat(name),
    className: "wkp-person-card ".concat(classes.card, " ".concat(className))
  }, props), title && /*#__PURE__*/React.createElement(Typography, {
    paragraph: true
  }, title), name && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-person-card-icon ".concat(classes.icon)
  }, /*#__PURE__*/React.createElement(PersonIcon, null)), /*#__PURE__*/React.createElement(Typography, null, "".concat(name, " ").concat(division ? " (".concat(division, ")") : ""))), phone && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-person-card-icon ".concat(classes.icon)
  }, /*#__PURE__*/React.createElement(PhoneIcon, null)), /*#__PURE__*/React.createElement(Typography, null, validatePhone(formattedPhone.replace(/\s/g, "")) ? /*#__PURE__*/React.createElement("a", {
    href: "tel:".concat(formattedPhone)
  }, formattedPhone) : /*#__PURE__*/React.createElement("span", null, formattedPhone))), email && /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-person-card-icon ".concat(classes.icon)
  }, /*#__PURE__*/React.createElement(MailIcon, null)), /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement("a", {
    href: "mailto:".concat(email)
  }, (email || "-").toLowerCase()))), (otherDetails || []).map(detail => /*#__PURE__*/React.createElement("div", {
    className: classes.row,
    key: detail.id
  }, /*#__PURE__*/React.createElement("div", {
    className: "wkp-person-card-icon ".concat(classes.icon)
  }, detail.icon), /*#__PURE__*/React.createElement(Typography, null, detail.label))), children);
}
PersonCard.propTypes = {
  name: PropTypes.string.isRequired,
  title: PropTypes.node,
  email: PropTypes.string,
  phone: PropTypes.string,
  division: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  otherDetails: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    icon: PropTypes.element.isRequired,
    label: PropTypes.node.isRequired
  })),
  className: PropTypes.string,
  children: PropTypes.node
};
export default PersonCard;
//# sourceMappingURL=PersonCard.js.map