import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { generateLabel, removeEmojis } from '../../../../helpers/info-grid';
import styles from './item.module.scss';

const InfoGridItem = ({
  templateTwo,
  showEmojis,
  showHyphen,
  gridKey,
  gridLabels,
  gridItems,
  template,
  templateThree,
}) => {
  const { translations } = useContext(Context) || {};
  const [showMore, setShowMore] = useState(false);

  const title = translate(translations, gridKey, gridLabels[gridKey][1]);
  const value = generateLabel(gridKey, gridItems[gridKey], gridLabels[gridKey][2], {
    translations,
    template,
    showAll: showMore,
    setShowMore,
  });
  const showGrid = (templateThree && value) || !templateThree; // hide entire cell if empty on author info grid only

  return (
    showGrid && (
      <div
        className={`${templateTwo ? styles.columnItem || '' : styles.gridItem || ''} ${
          templateThree ? styles.templateThree || '' : ''
        }`}
      >
        <span>
          {showEmojis ? title : removeEmojis(title)}
          {showHyphen && ':'}
        </span>
        <span>{value || '-'}</span>
      </div>
    )
  );
};

InfoGridItem.propTypes = {
  templateTwo: PropTypes.bool,
  showEmojis: PropTypes.bool,
  showHyphen: PropTypes.bool,
  gridKey: PropTypes.string,
  gridLabels: PropTypes.shape({}),
  gridItems: PropTypes.shape({}),
  template: PropTypes.string,
  templateThree: PropTypes.bool,
};

export default InfoGridItem;
