/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/no-danger */
/* eslint-disable react/prop-types */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from '~context/MainProvider';
import { getFirstValueOfKey } from '../../../helpers/generate-content';
import styles from './game-page-content.module.scss';

const GamePageContent = ({ pageContext }) => {
  const { translations } = useContext(Context) || {};
  const event = pageContext?.page?.relation?.event;
  const tournament = pageContext?.page?.relation?.tournament;

  const englishContent = `<p> {home} meets {away} on {date} at {hour} in the exciting showdown of 3 points in
                          {tournament}.</p>
                          <p> {website} is your perfect platform for live streaming of football, results, standings,
                          preludes and more.</p>
                          <p> This is the only page you need to have the whole football package under your skin.
                          Imagine getting the perfect overview from morning to night so you are dressed for it
                          quite big evening with the boys.</p>
                          <p> If you just had the latest results, you can always check it out on this page. And
                          if you need to see who the favorite team will face in the next round, then we have the entire calendar for
                          you. The best part though is that we are forwarding you to the best streaming services there
                          available on the market. Then you can decide the price rent, screen size and provider based on
                          our reviews. Of course, we only have legal services on our site, so you can rest assured
                          click on.</p>
                          <p> With {website} you get everything your heart desires from football, so get ready to stay
                          world class entertainment! </p>`;

  const content =
    getFirstValueOfKey(pageContext?.autogenerated, 'event_game_page_content') ||
    translate(translations, 'event_game_page_content', englishContent);

  const siteName =
    pageContext?.siteInfo?.site_name.charAt(0).toUpperCase() +
    pageContext?.siteInfo?.site_name.slice(1);

  const contentGen = (str) => {
    if (!str) return '';
    let output = str.replace(/{home}/g, event?.home_team?.name);
    output = output.replace(/{away}/g, event?.away_team?.name);
    output = output.replace(/{date}/g, event?.date?.date);
    output = output.replace(/{hour}/g, event?.date?.time);
    output = output.replace(/{tournament}/g, tournament?.name);
    output = output.replace(/{website}/g, siteName);
    return output;
  };

  const translated = ` ${contentGen(content)} `;

  return (
    <div className={styles.gameContentContainer}>
      <h1>
        {translate(translations, 'prelude', 'Prelude')}
        {': '}
        {event?.home_team?.name}
        {' vs '}
        {event?.away_team?.name}!
      </h1>
      <div dangerouslySetInnerHTML={{ __html: translated }} />
    </div>
  );
};

GamePageContent.propTypes = {
  pageContext: PropTypes.shape({
    page: PropTypes.shape({
      relation: PropTypes.shape({
        event: PropTypes.shape({}),
      }),
    }),
  }).isRequired,
};

export default GamePageContent;
