/* eslint-disable no-nested-ternary */
import React, { useRef, useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { FaChevronUp } from '@react-icons/all-files/fa/FaChevronUp';
import { FaChevronDown } from '@react-icons/all-files/fa/FaChevronDown';
import Collapse from 'gatsby-core-theme/src/components/atoms/collapse';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { getKeyValues, getInfoGridColumnValues } from '../../../../helpers/info-grid';
import { defaultInfoGrid, twoColInfoGrid } from '../../../../constants/info-grid';
import InfoGridItem from '../grid-item';
import InfoColumnItem from '../column-item';
import styles from './info-grid.module.scss';

const InfoGrid = ({
  page,
  showTwoColumns = false,
  onlyMobile = true,
  showHyphen = false,
  infoIcon,
  detailsIcon,
  showEmojis = false,
  maxHeight = 1200,
  showSeeMoreButton = false,
  showInitial = 6,
}) => {
  const ref = useRef();
  const { translations } = useContext(Context) || {};
  const { template, relation, market } = page;
  const [showMore, setShowMore] = useState(false);
  const gridLabels = showTwoColumns
    ? twoColInfoGrid[template] || Object.values(twoColInfoGrid)[0]
    : defaultInfoGrid[template] || Object.values(defaultInfoGrid)[0];
  const gridItems = showTwoColumns
    ? getInfoGridColumnValues(relation, gridLabels, market)
    : getKeyValues(relation, gridLabels, market);
  const templateTwo = showSeeMoreButton;

  const showGridItems = () => (
    <div ref={ref} className={`${templateTwo ? styles.singleColumn || '' : styles.grid || ''}`}>
      {Object.keys(gridItems)
        .slice(
          0,
          showSeeMoreButton
            ? showMore
              ? Object.values(gridItems).length
              : showInitial
            : Object.values(gridItems).length
        )
        .map((key) => (
          <InfoGridItem
            key={key}
            templateTwo={templateTwo}
            showEmojis={showEmojis}
            showHyphen={showHyphen}
            gridKey={key}
            gridLabels={gridLabels}
            gridItems={gridItems}
            template={template}
          />
        ))}
    </div>
  );

  return (
    <div className={styles.container || ''}>
      {showTwoColumns ? (
        <div className={styles.containerColumn || ''}>
          {Object.entries(gridItems).map((each) => (
            <InfoColumnItem
              key={each[0]}
              item={each}
              infoIcon={infoIcon}
              detailsIcon={detailsIcon}
              showEmojis={showEmojis}
              showHyphen={showHyphen}
              gridLabels={gridLabels}
              gridItems={gridItems}
              template={template}
            />
          ))}
        </div>
      ) : (
        <>
          <Collapse
            buttonText={translate(translations, 'information-grid', 'Information')}
            contentText={showGridItems()}
            onlyMobile={onlyMobile}
            maxHeight={maxHeight}
          />
          {templateTwo && Object.values(gridItems).length > showInitial && (
            <button
              type="button"
              onClick={() => setShowMore(!showMore)}
              className={styles.singleColumnSeeMore || ''}
            >
              {showMore ? (
                <>
                  {' '}
                  {translate(translations, 'see_less_items', 'Show less items')}{' '}
                  <FaChevronUp title="Up-pointing Arrow Icon" />{' '}
                </>
              ) : (
                <>
                  {' '}
                  {translate(translations, 'see_more_items', 'Show more items')}{' '}
                  <FaChevronDown title="Down-pointing Arrow Icon" />{' '}
                </>
              )}
            </button>
          )}
        </>
      )}
    </div>
  );
};

InfoGrid.propTypes = {
  page: PropTypes.shape({
    template: PropTypes.string,
    relation: PropTypes.shape({}),
    market: PropTypes.string,
  }),
  showTwoColumns: PropTypes.bool,
  onlyMobile: PropTypes.bool,
  showHyphen: PropTypes.bool,
  infoIcon: PropTypes.element,
  detailsIcon: PropTypes.element,
  showEmojis: PropTypes.bool,
  maxHeight: PropTypes.number,
  showSeeMoreButton: PropTypes.bool,
  showInitial: PropTypes.number,
};

export default InfoGrid;
