/* eslint-disable camelcase */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useState, useContext } from 'react';
import parse from 'html-react-parser';
import PropTypes from 'prop-types';
import { IoIosArrowDown } from '@react-icons/all-files/io/IoIosArrowDown';
import { Context } from '~context/MainProvider';
import replaceMedia from '../../../helpers/replaceMedia';
import styles from './content.module.scss';
import lists from './lists/lists.module.scss';
import table from './table/table.module.scss';
import frame from './frame/frame.module.scss';
import blockquote from './blockquote.module.scss';

const Content = ({
  module,
  isHomepageFirstModule = false,
  isModuleIntroduction = '',
  page,
  isContentCollapsible = false,
  icon = <IoIosArrowDown />,
}) => {
  const { show_more_label, show_more_enabled } = module || {};

  const { translations } = useContext(Context) || {};
  const [showMore, setShowMore] = useState(false);

  const handleChange = () => {
    setShowMore(!showMore);
  };

  const switchStyle = (style) => {
    switch (style) {
      case 'template_two':
        return `${table.templateTwo || ''}`;
      case 'template_three':
        return `${table.templateOne || ''} ${frame.frame || ''}`;
      default:
        return `${table.templateOne || ''}`;
    }
  };

  const mainContent = (content, customClassName = '') => (
    <div
      className={` ${styles.content || ''} ${lists.ul || ''} ${blockquote.blockquote || ''} 
       ${showMore && !isContentCollapsible ? styles.showMore : ''}  
      ${switchStyle(module.style) || ''} ${
        isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
      } ${isModuleIntroduction ? styles.moduleIntroMargin || '' : ''} ${customClassName}`}
    >
      {parse(content, {
        replace: (node) => replaceMedia(node, page, translations),
      })}
    </div>
  );

  return show_more_enabled !== '1' ? (
    mainContent(module.value)
  ) : (
    <>
      {mainContent(module.value)}
      <button
        type="button"
        className={`${isContentCollapsible ? styles.showMoreTwoButton : styles.showMoreButton} ${
          !isContentCollapsible && showMore && styles.hide
        } ${showMore && isContentCollapsible && styles.showMoreTwoButtonOpen}`}
        onClick={handleChange}
      >
        {show_more_label}
        {icon && isContentCollapsible && icon}
      </button>

      {showMore &&
        mainContent(
          module.show_more_content,
          isContentCollapsible ? styles.contentCollapsibleBox : ''
        )}
    </>
  );
};

Content.propTypes = {
  module: PropTypes.shape({
    anchor_label: PropTypes.string,
    name: PropTypes.string,
    module_title: PropTypes.string,
    value: PropTypes.string,
    style: PropTypes.string,
    show_more_content: PropTypes.string,
  }),
  page: PropTypes.shape({}),
  isHomepageFirstModule: PropTypes.bool,
  isModuleIntroduction: PropTypes.string,
  isContentCollapsible: PropTypes.bool,
  icon: PropTypes.node,
};

export default Content;
