import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Icon from '../Icon';

const formatDate = timeString => timeString && new Date(timeString).toLocaleString(undefined);

const ProtocolCard = props => {
  const {
    selected,
    condensed,
    schemaVersion,
    lastModified,
    installationDate,
    name,
    description,
    isOutdated,
    isObsolete,
    onStatusClickHandler,
    onClickHandler
  } = props;
  const modifierClasses = cx('protocol-card', {
    'protocol-card--clickable': onClickHandler
  }, {
    'protocol-card--condensed': condensed
  }, {
    'protocol-card--selected': selected
  }, {
    'protocol-card--outdated': !isObsolete && isOutdated
  }, {
    'protocol-card--obsolete': isObsolete
  });

  const renderStatusIcon = () => {
    if (isOutdated) {
      return /*#__PURE__*/React.createElement("div", {
        className: "status-icon status-icon--outdated",
        onClick: e => {
          e.stopPropagation();
          onStatusClickHandler();
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        name: "warning"
      }));
    }

    if (isObsolete) {
      return /*#__PURE__*/React.createElement("div", {
        className: "status-icon status-icon--obsolete",
        onClick: e => {
          e.stopPropagation();
          onStatusClickHandler();
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        name: "error"
      }));
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "protocol-icon"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "protocol-card"
    }));
  };

  const renderDescription = () => {
    if (condensed) {
      return /*#__PURE__*/React.createElement("div", {
        className: "protocol-description protocol-description--condensed"
      }, description);
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "protocol-description"
    }, description);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: modifierClasses,
    onClick: onClickHandler
  }, /*#__PURE__*/React.createElement("div", {
    className: "protocol-card__icon-section"
  }, renderStatusIcon(), !condensed && /*#__PURE__*/React.createElement("div", {
    className: "protocol-meta"
  }, installationDate && /*#__PURE__*/React.createElement("h6", null, "Installed:", formatDate(installationDate)), /*#__PURE__*/React.createElement("h6", null, "Last Modified:", formatDate(lastModified)), /*#__PURE__*/React.createElement("h6", null, "Schema Version:", schemaVersion))), /*#__PURE__*/React.createElement("div", {
    className: "protocol-card__main-section"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "protocol-name"
  }, name), description && renderDescription()));
};

ProtocolCard.defaultProps = {
  onClickHandler: undefined,
  onStatusClickHandler: () => {},
  description: null,
  installationDate: null,
  isOutdated: false,
  isObsolete: false,
  condensed: false,
  selected: false
};
ProtocolCard.propTypes = {
  schemaVersion: PropTypes.number.isRequired,
  lastModified: PropTypes.string.isRequired,
  // Expects ISO 8601 datetime string
  installationDate: PropTypes.string,
  // Expects ISO 8601 datetime string
  name: PropTypes.string.isRequired,
  description: PropTypes.string,
  onClickHandler: PropTypes.func,
  onStatusClickHandler: PropTypes.func,
  isOutdated: PropTypes.bool,
  isObsolete: PropTypes.bool,
  condensed: PropTypes.bool,
  selected: PropTypes.bool
};
export default ProtocolCard;