/* eslint-disable no-nested-ternary */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable react/no-danger */
/* eslint-disable camelcase */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import Button from '~atoms/button/button';
import imgSize from '../../../constants/spotlight-image-dimensions';
import LazyImage from '~hooks/lazy-image';
import keygen from '~helpers/keygen';
import { imagePrettyUrl, getImageFilename, getAltText, translate } from '~helpers/getters';
import Link from '~hooks/link';
import { Context } from '~context/MainProvider.js';
import styles from './spotlights.module.scss';

const Spotlights = ({ module, themeStyles = {} }) => {
  const { show_read_more, read_more_text, items, mode } = module;
  const { translations } = useContext(Context) || {};

  const content = (item) => {
    const img = mode === 'icon' ? item.icon : item.image;

    const imageSize = imgSize[module.style] ? imgSize[module.style] : imgSize.default;
    const imageSrc = imagePrettyUrl(img, imageSize?.width, imageSize?.height);

    const fileName = getImageFilename(imageSrc);
    const TitleTag = item?.title_tag || 'label';

    return (
      <>
        {img && (
          <LazyImage
            width={imageSize?.width}
            height={imageSize?.height}
            alt={getAltText(item?.image_object, item.label || item?.link_text || fileName)}
            src={imageSrc}
          />
        )}
        {item?.label && <TitleTag>{item.label}</TitleTag>}
        {item.subtitle && <span>{item.subtitle}</span>}
      </>
    );
  };

  const getStyle = () => {
    if (module?.style) {
      return themeStyles[module.style] || styles[module.style];
    }

    return ``;
  };

  return (
    <>
      {show_read_more === '1' && (
        <div
          className={styles.spotlightsText || ''}
          dangerouslySetInnerHTML={{ __html: read_more_text }}
        />
      )}
      <ul className={`${styles.spotlightsContainer || ''} ${getStyle() || ''}`}>
        {items.map((item) => (
          <li key={keygen()}>
            {item.link &&
              (item.link.type === 'external' ? (
                <a
                  href={item.link.value}
                  className="spotlights-gtm"
                  title={item.label}
                  target="_blank"
                  rel="noreferrer"
                  aria-label={`${item?.label || item?.link_text} Link`}
                >
                  {content(item)}
                </a>
              ) : (
                <Link
                  to={item.link.value}
                  title={item.label}
                  className="spotlights-gtm"
                  aria-label={`${item?.label || item?.link_text} Link`}
                >
                  {content(item)}
                </Link>
              ))}

            {(mode === 'image_text' || mode === 'icon') &&
              (item.link && item.link.value ? (
                <>
                  {item?.text && <div dangerouslySetInnerHTML={{ __html: item.text }} />}
                  <Button
                    to={item.link.value}
                    isInternalLink={!(item.link.type === 'external')}
                    buttonType="tertiary"
                    gtmClass="spotlights-gtm"
                    btnText={
                      item.link_text
                        ? item.link_text
                        : translate(translations, 'read_more', 'Read More')
                    }
                  />
                </>
              ) : (
                item.text && <div dangerouslySetInnerHTML={{ __html: item.text }} />
              ))}
          </li>
        ))}
      </ul>
    </>
  );
};
Spotlights.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  themeStyles: PropTypes.object,
  module: PropTypes.shape({
    style: PropTypes.string,
    mode: PropTypes.oneOf(['image', 'icon', 'image_text']).isRequired,
    items: PropTypes.arrayOf(
      PropTypes.shape({
        icon: PropTypes.string,
        image: PropTypes.string,
        label: PropTypes.string,
        link: PropTypes.shape({
          title: PropTypes.string,
          type: PropTypes.string,
          value: PropTypes.string,
        }),
        link_text: PropTypes.string,
        text: PropTypes.string,
      })
    ),
    read_more_text: PropTypes.string,
    show_read_more: PropTypes.string,
  }).isRequired,
};
export default Spotlights;
