import React from 'react';
import PropTypes from 'prop-types';

// import child components
import CompHeading from '../../atoms/headings/CompHeading';
import Paragraph from '../../atoms/text/Paragraph';
import DecorativeLink from '../../atoms/links/DecorativeLink';

import './style.css';

var LinkList = function LinkList(props) {
  var compHeading = props.compHeading,
      description = props.description,
      stacked = props.stacked,
      hideBullets = props.hideBullets,
      links = props.links,
      more = props.more;

  var bulletClass = hideBullets ? 'ma__link-list__items--no-bullets' : '';
  var length = links.length;
  var halfLength = Math.ceil(length / 2);
  return React.createElement(
    'section',
    { className: 'ma__link-list' },
    compHeading && React.createElement(CompHeading, compHeading),
    description && React.createElement(Paragraph, description),
    React.createElement(
      'div',
      { className: 'ma__link-list__container' },
      stacked || length < 4 ? React.createElement(
        'ul',
        { className: 'ma__link-list__items ' + bulletClass },
        links.map(function (link, index) {
          return (
            /* eslint-disable-next-line react/no-array-index-key */
            React.createElement(
              'li',
              { className: 'ma__link-list__item', key: index },
              React.createElement(DecorativeLink, link)
            )
          );
        })
      ) : React.createElement(
        React.Fragment,
        null,
        React.createElement(
          'ul',
          { className: 'ma__link-list__items ' + bulletClass },
          links.slice(0, halfLength).map(function (link, index) {
            return (
              /* eslint-disable-next-line react/no-array-index-key */
              React.createElement(
                'li',
                { className: 'ma__link-list__item', key: index },
                React.createElement(DecorativeLink, link)
              )
            );
          })
        ),
        React.createElement(
          'ul',
          { className: 'ma__link-list__items ' + bulletClass },
          links.slice(halfLength, length).map(function (link, index) {
            return (
              /* eslint-disable-next-line react/no-array-index-key */
              React.createElement(
                'li',
                { className: 'ma__link-list__item', key: index + halfLength },
                React.createElement(DecorativeLink, link)
              )
            );
          })
        )
      )
    ),
    React.createElement(
      'div',
      { className: 'ma__link-list__see-all' },
      more && React.createElement(DecorativeLink, more)
    )
  );
};

LinkList.propTypes = process.env.NODE_ENV !== "production" ? {
  /** @atoms/headings/CompHeading */
  compHeading: PropTypes.shape(CompHeading.PropTypes),
  /** short description rendered below the heading, note that this version renders @atoms/text/Paragraph instead of rich text */
  description: PropTypes.shape(Paragraph.PropTypes),
  /** Render links as a stacked list instead of two columns */
  stacked: PropTypes.bool,
  /** Hide bullets for the list of links */
  hideBullets: PropTypes.bool,
  /** List of links rendered */
  links: PropTypes.arrayOf(PropTypes.shape(DecorativeLink.PropTypes)).isRequired,
  /** @atoms/DecorativeLink as see all link */
  more: PropTypes.shape(DecorativeLink.PropTypes)
} : {};

export default LinkList;