import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import { MdInfo } from '@react-icons/all-files/md/MdInfo';
import { MdPortrait } from '@react-icons/all-files/md/MdPortrait';
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 InfoColumnItem = ({
  item,
  infoIcon = <MdInfo title="Info Icon" />,
  detailsIcon = <MdPortrait title="Portrait Icon" />,
  showEmojis,
  showHyphen,
  gridLabels,
  gridItems,
  template,
}) => {
  const { translations } = useContext(Context) || {};
  const [showMore, setShowMore] = useState(false);
  const [key, value] = item;

  const getTemplate = () => {
    switch (template) {
      case 'game_review':
        return 'Slot';
      case 'operator_review':
        return 'Casino';
      default:
        return 'Sportsbook';
    }
  };

  return (
    <div className={styles.general || ''}>
      <div className={styles.header || ''}>
        <span>
          {key === 'info' ? (
            <>
              <div className={styles.imgContainer || ''}>{infoIcon}</div>
              {translate(translations, 'general_info', 'General Info')}
            </>
          ) : (
            <>
              <div className={styles.imgContainer || ''}>{detailsIcon}</div>
              {`${getTemplate()} ${translate(translations, 'details', 'Details')}`}
            </>
          )}
        </span>
      </div>
      <div className={styles.info || ''}>
        {Object.keys(value).map((valueKey) => {
          const itemTitle = translate(translations, valueKey, gridLabels[key][valueKey][1]);
          const itemValue = generateLabel(
            valueKey,
            gridItems[key][valueKey],
            gridLabels[key][valueKey][2],
            { translations, template, showAll: showMore, setShowMore }
          );
          return (
            itemValue && (
              <div key={valueKey} className={styles.gridItem || ''}>
                <span>
                  {showEmojis ? itemTitle : removeEmojis(itemTitle)}
                  {showHyphen && ':'}
                </span>
                <span>{itemValue || '-'}</span>
              </div>
            )
          );
        })}
      </div>
    </div>
  );
};

InfoColumnItem.propTypes = {
  item: PropTypes.shape({}),
  infoIcon: PropTypes.element,
  detailsIcon: PropTypes.element,
  showEmojis: PropTypes.bool,
  showHyphen: PropTypes.bool,
  gridLabels: PropTypes.shape({}),
  gridItems: PropTypes.shape({}),
  template: PropTypes.string,
};

export default InfoColumnItem;
