import React__default, { useEffect, useState, useRef } from 'react';
import { _ as _slicedToArray } from './slicedToArray-7021e5df.js';

var AuthorComponent = function AuthorComponent(_ref) {
  var authors = _ref.authors,
      index = _ref.index;

  var renderAuthor = function renderAuthor(authorDetail, index, length) {
    if (authorDetail) {
      var _id = authorDetail._id,
          displayName = authorDetail.displayName,
          url = authorDetail.url;


      if (displayName && url && url.current) {
        return React__default.createElement(
          'span',
          { key: _id },
          index === 0 && React__default.createElement(
            'span',
            { className: 'pr-1' },
            'By'
          ),
          React__default.createElement(
            'a',
            { href: '/authors/' + url.current, className: 'author-name', style: { color: '#000', fontWeight: 'bold' } },
            displayName
          ),
          length !== index + 1 && ', '
        );
      } else if (displayName) {
        return React__default.createElement(
          'span',
          { key: _id },
          index === 0 && React__default.createElement(
            'span',
            { className: 'pr-1' },
            'By'
          ),
          React__default.createElement(
            'span',
            { className: 'author-name', style: { color: '#000', fontWeight: 'bold' } },
            displayName,
            length !== index + 1 && ', '
          )
        );
      }
    } else return null;
  };

  var onOverlayClick = function onOverlayClick() {
    if (authorRef && authorRef.current) {
      authorRef.current.classList.remove('hide-content');
      sethideContent(false);
    }
  };

  useEffect(function () {
    if (authorRef && authorRef.current.clientHeight && authorRef.current.clientHeight > 50) {
      authorRef.current.classList.add('hide-content');
      sethideContent(true);
    }
  }, []);

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      hideContent = _useState2[0],
      sethideContent = _useState2[1];

  var overlayRef = useRef(null);
  var authorRef = useRef(null);

  return React__default.createElement(
    'div',
    { id: 'author-sec' + index, ref: authorRef },
    hideContent && React__default.createElement('div', { onClick: function onClick() {
        return onOverlayClick();
      }, ref: overlayRef, id: 'overlay-content' + index }),
    authors.map(function (authorDetail, index) {
      return renderAuthor(authorDetail, index, authors.length);
    }),
    React__default.createElement(
      'style',
      { jsx: true },
      '\n          #author-sec' + index + ' {\n            line-height: 25px;\n            position: relative;\n            height: auto;\n            // max-height: 50px;\n          }\n          .hide-content {\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n          }\n          #overlay-content' + index + ' {\n            position: absolute;\n            cursor: pointer;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            z-index: 1000;\n          }\n        '
    )
  );
};

export { AuthorComponent as A };
