import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["label", "labelStatus", "interactive", "image", "heading", "subHeading", "caption", "tag", "children", "className"];
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Tag from '../Tag';
import { settings } from '../../globals/js';
var prefix = settings.prefix;

var CardExternal = function CardExternal(_ref) {
  var _classNames;

  var label = _ref.label,
      labelStatus = _ref.labelStatus,
      interactive = _ref.interactive,
      image = _ref.image,
      heading = _ref.heading,
      subHeading = _ref.subHeading,
      caption = _ref.caption,
      tag = _ref.tag,
      children = _ref.children,
      className = _ref.className,
      other = _objectWithoutProperties(_ref, _excluded);

  var myRef = useRef();
  var supportiveTextFontSize = 14;
  var supportiveTextLineHeight = 1.5; // Set a maximum of 3 lines of supportive text by default

  var _useState = useState(supportiveTextFontSize * supportiveTextLineHeight * 3),
      _useState2 = _slicedToArray(_useState, 2),
      supportiveTextHeight = _useState2[0],
      setsupportiveTextHeight = _useState2[1]; // statusStyle apply different style(color, backgroundColor) based on its active state 


  var statusStyle = labelStatus ? "success" : "neutral";
  var wrapperClasses = classNames("".concat(prefix, "--card-ext"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--card-ext--interactive"), interactive), _defineProperty(_classNames, "".concat(className), className), _classNames));
  /**
   * Get the height of the supportive text element.
   * This is useful to calculate a dynamic maximum amount of line text with final
   * ellipsis for the "supportive text" element, depending of the available
   * height.
   *
   * Cards' title has no limits in terms of line text, whereas we can decide to
   * truncate the supportive text at 3 number of lines. The multiline truncation
   * can be obtained by using the "line clamp" CSS property that truncates text
   * at a specific number of lines.
   * The problem is, if we place three cards on a Flexbox/Grid parent, these
   * cards will have the same height, depending on the highest of the three.
   * This means that if one card has a multiline title, the other two will grow
   * in height, showing a significant white space. To fill the latter cards'
   * white space we need to increase the number of their "supportive text" lines.
   * To do this we need to divide the "supportive text" element's height by its
   * font-size and line-height in order to get exact amount of line text that are
   * needed to fill the extra white space.
   *
   */

  useEffect(function () {
    setsupportiveTextHeight(myRef.current.offsetHeight);
  }, [myRef]);
  return (
    /*#__PURE__*/

    /* Also expose a custom classname prop */

    /**
     * A prop will establish if the card is either informative (default) or
     * interactive.
     * If interactive, a modifier will be added and an animation will be shown
     * on hover event ("${prefix}--card-ext--interactive").
     */
    React.createElement("div", {
      className: wrapperClasses
    }, label && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "--card-ext__label ").concat(prefix, "--card-ext__label--").concat(statusStyle)
    }, label), /*#__PURE__*/React.createElement("figure", {
      className: "".concat(prefix, "--card-ext__media")
    }, /*#__PURE__*/React.createElement("img", {
      className: "".concat(prefix, "--card-ext__image"),
      src: image,
      alt: "Card picture"
    })), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "--card-ext__info-wrapper ").concat(prefix, "--card-ext__info-wrapper--with-divider")
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "--card-ext__primary-title")
    }, subHeading && /*#__PURE__*/React.createElement("p", {
      className: "".concat(prefix, "--card-ext__subheading")
    }, subHeading), heading && /*#__PURE__*/React.createElement("p", {
      className: "".concat(prefix, "--card-ext__heading")
    }, heading)), /*#__PURE__*/React.createElement("div", {
      className: other.truncated ? "".concat(prefix, "--card-ext__supportive-text ").concat(prefix, "--card-ext__supportive-text--truncated") : "".concat(prefix, "--card-ext__supportive-text"),
      ref: myRef
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        WebkitLineClamp: Math.floor(supportiveTextHeight / supportiveTextLineHeight / supportiveTextFontSize)
      }
    }, caption)), tag && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "--card-ext__tags")
    }, /*#__PURE__*/React.createElement(Tag, {
      className: "".concat(prefix, "--card-ext__tag"),
      type: "custom"
    }, tag))), children)
  );
};

CardExternal.propTypes = {
  /**
   label description for card if any
  */
  label: PropTypes.string,

  /**
   labelStatus is either true or false, it applies  for card if any
  */
  labelStatus: PropTypes.bool,
  image: PropTypes.string,
  heading: PropTypes.string,
  subHeading: PropTypes.string,
  caption: PropTypes.string,
  tag: PropTypes.string,
  children: PropTypes.node,
  interactive: PropTypes.bool,
  className: PropTypes.string
};
export default CardExternal;