/* eslint-disable arrow-body-style */
/* eslint-disable no-nested-ternary */
import React from 'react';
import PropTypes from 'prop-types';

import keygen from '~helpers/keygen';
import { imagePrettyUrl, getAltText } from '~helpers/getters';
import Link from '~hooks/link';
import LazyImage from '~hooks/lazy-image';

/* eslint-disable react/jsx-no-target-blank */

const LinkList = ({
  lists,
  showListTitle = true,
  imageOnly = false,
  singleList = false,
  listIcon = <></>,
  multiIcon = false,
  classes,
  disableLazyLoad = false,
  height,
  width,
  gtmClass = '',
}) => {
  function renderLinkContent(item, index) {
    const icon = listIcon[index];

    const LinkImage = () => (
      <LazyImage
        src={imagePrettyUrl(
          item.image || item.logo?.url?.split('.com/')[1],
          width || item?.image_object?.width || item.logo?.width,
          height || item?.image_object?.height || item.logo?.height
        )}
        alt={getAltText(item?.image_object || item.logo, item.title)}
        width={width || item?.image_object?.width || item.logo?.width}
        height={height || item?.image_object?.height || item.logo?.height}
        loading={disableLazyLoad ? 'eager' : 'lazy'}
      />
    );

    return (
      <>
        {!imageOnly && (
          <>
            {multiIcon ? icon : listIcon}
            <span>{item.title}</span>
            {(item.image || item.logo) && <LinkImage />}
          </>
        )}
        {(item.image || item.logo) && imageOnly && <LinkImage />}
      </>
    );
  }

  function renderItems(item, index) {
    const link = item?.value || item?.url;

    return (
      <li key={keygen()}>
        {link ? (
          link.includes('http') || link.includes('www') ? (
            <a
              href={link}
              title={item.title || item.name}
              rel={`noreferrer ${item.nofollow && 'nofollow'}`}
              target="_blank"
              className={gtmClass || ''}
              aria-label={`${item.title || item.name} Link`}
            >
              {renderLinkContent(item, index)}
            </a>
          ) : (
            <Link
              to={link}
              title={item.title || item.name}
              className={gtmClass || ''}
              rel={item.nofollow && 'nofollow'}
              aria-label={`${item.title || item.url} Link`}
            >
              {renderLinkContent(item, index)}
            </Link>
          )
        ) : (
          renderLinkContent(item, index)
        )}
      </li>
    );
  }

  const renderSingleList = () => {
    return (
      <ul className={classes}>
        {lists.children.map((item, index) => {
          return renderItems(item, index);
        })}
      </ul>
    );
  };

  const renderLinklists = () => {
    return lists.children.map((list) => {
      return (
        <ul className={classes || ''} key={keygen()}>
          {showListTitle && <li key={keygen()}>{list.title}</li>}
          {list.children &&
            list.children.map((child) => {
              return renderItems(child);
            })}
        </ul>
      );
    });
  };

  return lists && lists.children ? !singleList ? renderLinklists() : renderSingleList() : <></>;
};

LinkList.propTypes = {
  lists: PropTypes.shape({
    title: PropTypes.string,
    value: PropTypes.string,
    children: PropTypes.arrayOf(
      PropTypes.shape({
        title: PropTypes.string,
        value: PropTypes.string,
      })
    ),
  }).isRequired,
  showListTitle: PropTypes.bool,
  singleList: PropTypes.bool,
  imageOnly: PropTypes.bool,
  listIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.any, PropTypes.node]),
  multiIcon: PropTypes.bool,
  classes: PropTypes.string,
  disableLazyLoad: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  gtmClass: PropTypes.string,
};

export default LinkList;
