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

import Link from '../../controls/Link/Link';
import pickDataAttributes from '../../utils/pickDataAttributes';

const FooterNav = ({ links, variant }) => {
  const makeLink = itemOrElement => {
    if (React.isValidElement(itemOrElement)) {
      return itemOrElement; // itemOrElement: <Link>
    }
    const { label, to, action, ...rest } = itemOrElement; // itemOrElement: { props }

    if (action && typeof action === 'function') {
      return (
        <button className={classnames('Link-Button', 'Link')} onClick={action} {...pickDataAttributes(rest)}>
          {label}
        </button>
      );
    }

    return (
      <Link to={to} {...pickDataAttributes(rest)}>
        {label}
      </Link>
    );
  };

  const makeList = linkItemsOrElements => (
    <ul>
      {linkItemsOrElements.map((itemOrElement, index) => (
        <li key={itemOrElement.key || index}>{makeLink(itemOrElement)}</li>
      ))}
    </ul>
  );

  if (variant === 'primary') {
    const linksRow1 = links.slice(0, 4);
    const linksRow2 = links.slice(4);
    const primaryNavWrapped = (
      <nav className="Footer-primaryNav Footer-primaryNav-wrapped">
        {makeList(linksRow1)}
        {makeList(linksRow2)}
      </nav>
    );

    const primaryNavStraight = <nav className="Footer-primaryNav Footer-primaryNav-straight">{makeList(links)}</nav>;

    return (
      <React.Fragment>
        {primaryNavWrapped}
        {primaryNavStraight}
      </React.Fragment>
    );
  } else if (variant === 'secondary') {
    const secondaryNav = <nav className="Footer-secondaryNav">{makeList(links)}</nav>;
    return <React.Fragment>{secondaryNav}</React.Fragment>;
  }
};

FooterNav.propTypes = {
  links: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.element])),
  variant: PropTypes.oneOf(['primary', 'secondary']),
};

FooterNav.defaultProps = {
  links: [],
  variant: 'primary',
};

export default FooterNav;