import React, { useState } from 'react';
import PropTypes from 'prop-types';

import useTranslate from '~hooks/useTranslate/useTranslate';
import { generateLabel, removeEmojis } from '../../../../helpers/info-grid';
import styles from './item.module.scss';

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

  const title = useTranslate(gridKey, gridLabels[gridKey][1]);
  const label = generateLabel(gridKey, gridItems[gridKey], gridLabels[gridKey][2], {
    template,
    showAll: showMore,
    setShowMore,
    modulePosition,
    module:'info_grid',
  });


  const value =
  gridKey === 'payout_time'
    ? useTranslate(label?.toLowerCase()?.replace(/[–\s]/g, '_'), label)
    : label;

  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,
  modulePosition: PropTypes.number
};

export default InfoGridItem;
