/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import { FaPlus } from '@react-icons/all-files/fa/FaPlus';
import { FaMinus } from '@react-icons/all-files/fa/FaMinus';
import LazyImage from '../../../../../../hooks/lazy-image';
import Button from '../../../../../atoms/button/button';
import { imagePrettyUrl, translate } from '../../../../../../helpers/getters.mjs';
import { Context } from '../../../../../../context/MainProvider';
import styles from './style.module.scss';

export default function TemplateOne({
  item,
  readMore = false,
  scrollableContent = false,
  buttonType = 'secondary',
  buttonSize = 'm',
}) {
  const { translations } = useContext(Context) || {};
  const [showMore, setShowMore] = useState(false);
  const TitleTag = item?.title_tag || 'label';

  return (
    <div className={styles.item}>
      <div className={styles.topSection}>
        {item?.image && <LazyImage width={104} height={104} src={imagePrettyUrl(item?.image)} />}
        {item?.label && <TitleTag>{item?.label}</TitleTag>}
        {item?.text && (
          <div
            className={`${styles.desc} ${scrollableContent ? styles.scroll : ''} ${
              readMore && !scrollableContent && !showMore ? styles.readMore : ''
            }`}
            dangerouslySetInnerHTML={{ __html: item?.text }}
          />
        )}
        {readMore && !scrollableContent && (
          <span onClick={() => setShowMore(!showMore)} className={styles.readMoreBtn}>
            {!showMore ? (
              <>
                {translate(translations, 'read_more', 'Read more')}
                <FaPlus size={16} />
              </>
            ) : (
              <>
                {translate(translations, 'read_less', 'Read less')}
                <FaMinus size={16} />
              </>
            )}
          </span>
        )}
      </div>

      {item?.link?.value && (
        <Button
          icon={<FaArrowRight />}
          buttonType={buttonType}
          buttonSize={buttonSize}
          isInternalLink={item?.link?.type !== 'external'}
          targetBlank={item?.link?.type !== 'page'}
          to={item?.link?.value}
          btnText={
            item?.link_text || translate(translations, 'read_review_spotlight', 'Read review')
          }
        />
      )}
    </div>
  );
}

TemplateOne.propTypes = {
  item: PropTypes.shape({
    link: PropTypes.shape({
      value: PropTypes.string,
      type: PropTypes.string,
    }),
    title_tag: PropTypes.string,
    image: PropTypes.string,
    link_text: PropTypes.string,
    label: PropTypes.string,
    text: PropTypes.string,
  }).isRequired,
  readMore: PropTypes.bool,
  scrollableContent: PropTypes.bool,
  buttonType: PropTypes.string,
  buttonSize: PropTypes.string,
};
