import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["avatar", "className", "description", "lineItems", "title"],
    _excluded2 = ["icon"];
import React from 'react';
import cx from 'classnames';
import theme from './theme.css';
import Avatar from '../avatar';
import Box from '../box';
import Icon from '../icon';
import Link from '../link';
import Popover from '../popover';
import { Heading3, TextBody } from '../typography';

var Passport = function Passport(_ref) {
  var avatar = _ref.avatar,
      className = _ref.className,
      description = _ref.description,
      lineItems = _ref.lineItems,
      title = _ref.title,
      others = _objectWithoutProperties(_ref, _excluded);

  var renderDescription = function renderDescription() {
    if (!description) {
      return null;
    }

    if (Array.isArray(description)) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, description.map(function (child, index) {
        return /*#__PURE__*/React.createElement(TextBody, {
          color: "teal",
          key: index
        }, child);
      }));
    } else {
      return /*#__PURE__*/React.createElement(TextBody, {
        color: "teal"
      }, description);
    }
  };

  var renderTitle = function renderTitle() {
    return /*#__PURE__*/React.createElement(Heading3, {
      className: cx(theme['prevent-overflow'], theme['prevent-wrap'], theme['show-ellipsis']),
      color: "teal"
    }, typeof title === 'string' ? title : /*#__PURE__*/React.createElement(Link, _extends({}, title, {
      inherit: false
    })));
  };

  return /*#__PURE__*/React.createElement(Popover, _extends({}, others, {
    backdrop: "transparent",
    className: cx(theme['passport'], className)
  }), /*#__PURE__*/React.createElement(Box, {
    padding: 3
  }, /*#__PURE__*/React.createElement(Box, {
    display: "flex"
  }, /*#__PURE__*/React.createElement(Box, {
    flex: "48px 0 0",
    paddingRight: 3
  }, /*#__PURE__*/React.createElement(Avatar, _extends({}, avatar, {
    size: "small"
  }))), /*#__PURE__*/React.createElement(Box, {
    className: theme['prevent-overflow']
  }, renderTitle(), renderDescription())), lineItems && /*#__PURE__*/React.createElement(Box, {
    marginTop: 3
  }, lineItems.map(function (_ref2, index) {
    var icon = _ref2.icon,
        lineItem = _objectWithoutProperties(_ref2, _excluded2);

    return /*#__PURE__*/React.createElement(Box, {
      alignItems: "flex-start",
      display: "flex",
      key: index
    }, /*#__PURE__*/React.createElement(Box, {
      display: "flex",
      flex: "48px 0 0",
      justifyContent: "center",
      paddingRight: 3
    }, icon && /*#__PURE__*/React.createElement(Icon, {
      color: lineItem.href || lineItem.onClick ? 'aqua' : 'teal',
      tint: lineItem.href || lineItem.onClick ? 'dark' : 'darkest',
      marginTop: 1
    }, icon)), /*#__PURE__*/React.createElement(TextBody, {
      className: cx(theme['prevent-overflow'], theme['prevent-wrap'], theme['show-ellipsis']),
      color: "teal"
    }, lineItem.href || lineItem.onClick ? /*#__PURE__*/React.createElement(Link, _extends({}, lineItem, {
      inherit: false
    })) : lineItem.children));
  }))));
};

export default Passport;